React useState and useEffect Hooks

From what I’ve heard React Class Components are being used less and less. Also, seeing the power of hooks is amazing. I want to talk about the useState hook and the useEffect hook. With the Recoil hook coming out I want to get used to using function components as much as possible.

The benefits I have found so far to using hooks:

1. I never have to think about if I should be using a class component vs a function component.
2. I never have to worry about refactoring a function component into a class component because I need state or life cycle methods.
3. componentDidMount? willMount? didUdate? etc… or… useEffect
4. no more forgetting which component you’re in and having to remember to use .this
5. Less typing. Less typing = less typos = less bugs. Or thats what I say to myself to justify my lzynss
6. The Recoil hook which a state manager similar to redux can read state and update state across components without the need to pass it down the component hierarchy.

So how do we use state without a class component? Enter the useState hook.

First we need to import useState from react.

Next, inside our function component we need to assign the useState hook.

The first argument in the [] is the “state” we want to manage. In this example the state is “info”. The second argument is the function we will use to set state for info. On the right side of the = we have the useState hook. Inside the ( ) is the default value for “info”.

Here’s a side by side of function component vs class component with the same state.

So set state we use the function that was passed in as the second argument in the [ ].

Lets say we have const [isAdult, setIsAdult] = useState(false). To change the state we would use setIsAdult(true).

In the case of the example of info, the default value is an object. We can use the spread operator to update the state of each value. Here’s an example of using it for a controlled form.

Using the useEffect Hook

So far i’ve used the useEffect hook for componentDidMount and componentDidUpdate .

To use the useEffect hook will you will need to import it from react just like useState

The useEffect hook takes two arguments.

The first is the code you want to run. The second, is a dependency array. If the second argument is missing, the hook will run every time the component renders or when the component receives any form of update (i.e. its props have been updated)

infinite loop

In the above picture when the component mounts it will setName to the props.user.name which is a state change. A state change will cause a re-render which will cause the useEffect hook to fire which causes an infinite loop

To prevent the infinite loop we can set the second argument to an empty array. Doing so will make the useEffect behave like a componentDidMount since there is no variable it is dependent on.

useEffect behaving like componentDidMount

Having a variable inside the dependency array will only run the hook if that variable has updated.

Class components aren’t going away, at least anytime soon, but I will be using hooks and function components when ever I can.