useState(), and the useEffect() Hooks

Bryan Meadows — Wed, 07 Sep 2022 20:49:52 +0000

When react was first introduced the best way to or the only way really to declare or use a state was to create it in a class component, but with the introduction of hooks declaring and using state inside a function component became possible and the most adopted way of doing just that.
Hooks are React functions that allow our react function components the ability to call and use state. Currently the most used hooks within React are the useState, and the useEffect hook, and within this post I will be going over a basic rundown of these two hooks.

useState():

Definitely the most use hook in React is the useState hook. Now normally variable the are used within a function disappear when the function is exited, but a state variable is preserved by React. The way you would use state before hooks was you had to declare state within a Class component by using this.state, but unlike Classes useState doesn't need to be an object. It is simply a state variable declared by writing what it will be called along with useState.

Declaring useState():

First we need to import the hook from React, we can do this at the top of the component we want to declare state in by simply typing.
import {useState} from 'react';
Now we have imported the useState hook how about we use it and we can do that by declaring our state variable like so.
ex: const [count, setCount] = useState(0);
now lets break this down a little bit.
count is our state variable:
the 0 withing the () is the initial count that it is set to
and setCount: will be what we can use to modify and update our count state.

Rendering State:

Rendering state is just as simple as declaring it
instead of the old way of doing it with class components.
ex: <>This is the current {this.state.count}.</>
in a function we can use it directly
ex: <>This is the current {count}.</>

Updating State:

To update state in a class we would have to call setState() to update the count state
ex: this.setState({count: this.state.count + 1})}>count +
with the useState hook we already have setCount and count as variables so we no longer have use for the this method.
ex: setCount(count + 1)}>count +

Rundown:

we imported our state who from react
we declare our state variable inside of function component and set the initial value of our variable to 0
We updated our count variable every time we click that button which calls setCount and give it a new value. React will then re-render the component pass the new count value to it.

useEffect():

The useEffect() hook allows you to preform side effects. A function component will use props and/or state to calculate an output. If the calculation doesn't target the output value, then these calculations are what we call side-effects.
Some example of side-effects are fetch requests, manipulating the DOM directly, using functions like setTimeout(), etc.
Now the rendering of the components and the rendering of the side-effect logic is independent. It would be incorrect to have your side-effects preform directly inside of the body of you component, which is primarily used to compute an output, and how often a component renders isn't something you can control - if React wants to render a component it will do so with or without your permission.
So how do you decouple rendering from the side-effect. You use useEffect() the hook that runs side-effects independently of rendering.
useEffect() will take in 2 arguments:

the callback: which is the function containing the side-effect logic. callback is executed right after changes are pushed to the DOM
dependencies is a an optional array of dependencies, useEffect() executes a callback only if the dependencies have changed between renders. so you put your side-effect logic into the callback function, then use the dependencies argument to control when you want to fire that side-effect. That is the purpose of useEffect(). #### Dependencies: As stated above the dependencies argument lets you control when a side-effect will run. -When a dependency is not provided the side-effect will run after every rendering. -when an empty array [] is used, the side-effect runs only once after the initial render. -When props or state values are used as dependencies. The side-effect will only run when any of the dependency value changes. #### Cleanup: Some of side-effects will need to be cleaned up: close a socket, or clear times. Now if the callback of useEffect() returns a function, then this will be considered an effect cleanup. cleanup works like so:
after the initial render, useEffect() will invoke the callback having the side-effect.
on later renders, before the next callback, useEffect() invokes the cleanup funtion from the previous side-effect excecution, then runs the current side-effect 3.After unmounting from the component, useEffect() invokes the cleanup funtion from the latest side-effect. ##### In Practice: useEffect() can preform a data fetching side-effect. -Inside you component function

useEffect(() => {
    fetch('api being fetched')
     .then(response => response.json())
     .then(data => console.log(data)}, [])

useEffect() starts the fetch request by calling an async funtion.
when the fetch request is completed we then take whatever data may come from the fetch and log it into our console, and the empty [] ensures we only run the fetch once at the initial render.
So in conclusion the useEffect() hook is the hook that manages side-effects in functional components`

Astro Framework

Bryan Meadows — Tue, 30 Aug 2022 03:06:43 +0000

Oh no not another JavaScript Framework say it’s not so.

It seems like every other day someone will come up with a brand new framework for JS claiming it is the new hot thing, making one of the most difficult things for a Front-End developer to do. figure out which of the 1,000,000+ and counting frameworks is best to use, and when you jump into one of them there tends to be great difficulty in using another, and that’s where Astro comes in.
Astro is a newer framework built in 2021, that works kind of similar to a static site generator that builds its sites using a mark-down language(similar to Hugo). With the code itself looking and feeling very similar to other frontend frameworks having your <> and { } respectfully, but what makes it unique is its ability for you to import your favorite(as a component) frontend frameworks like React, Svelt, Angular, and Vue into it and Astro will render the UI on the server but it will actually ship no JS to the browser itself. Making the render times extremely quick.
But how does a component work without its JavaScript running along with it. The answer is it doesn’t Astro actually uses static HTML by defaulft (making it a superset of HTML), but if you do need interactivity with JS you can by opting into JS as needed to add islands of interactivity to the page, and that’s a way to look at how Astro works

Think of your components as islands on a page each island has its own set of components that you can put in your React, Angular, JS to put in how you want the page to interact with the user. In example you could have a component called header that has a button inside it, you want that button to be interactive but don’t need the rest of your header to be so you can create a header component file with the name Header.astro then a button component button.jsx allowing you to style and do whatever your heart desires with React inside that button component while still keeping the speed of Astro’s use of Static HTML, But there can also be an island that uses only static HTML with no JS and doesn’t need any interactivity to render such as text, images, sidebars, etc, and because of this the app will render and run at a much greater speed. And use less memory, as JS is the bottleneck for web app speed and functionality.

You can also decide when you want to load a certain component(this is called partial hydration)
will load the content asap like it would normally.
will load your component after the page is loaded and becomes idle like an ad that doesn’t need to render immediately, and can wait.
will only render the component onto the page when it becomes visible on the users view port(screen) like when you scrolling the looking at images it wont load until it needs to saving memory.(now there are ways to do this with JS but this is much easier, cleaner, as well as faster)
The main limitation with Astro at the moment is it’s inability outside the box to do client side routing. Making it different than something like NEXT.js(a framework that many React users will come to know) that has full hydration(where the client side router takes over after the page load). With Astro being a partial Hydration you get a entire new page with each navigation(meaning the JS will reboot with each new page load) while this makes Astro according to them 94% faster than NEXT it also makes it extremely difficult to manage an authentication State(like a user login) between routes as well as any data from a Data Base that may render in realtime. However there is a project that is being worked on called Astro SPA that looks to fix this issue, and if this can get to a stable state. We maybe looking at the ultimate framework as it will cover all of the major uses for a framework.
Does your site need to be Highly interactive if the answer is yes then Astro is good. How about Search Engine Optimization(seo) than Astro would be the answer again. How about dynamic that would be another yes for Astro. So with the future of Astro looking bright It could mean that when you need to decide on which framework is best for which situation. Then the answer will most likely be Astro, meaning less time figuring out your tech stack and more time actually working on your project.

DEV Community: Bryan Meadows