This is a junior take at React Hooks – which is one of the most important things to understand when learning React. React is a JavaScript library. Learning React has been an interesting experience as most people are accustomed to object-oriented programming. With React being function-oriented, therefore immutable, it takes some time to familiarize. In this blog, we’ll dive into two of the most used Hooks in React: useState and useEffect. This will serve as a starting point in understanding how React works and how to mutate data in an immutable language.
First, we’ll start with the useState hook – the easiest one to understand in my experience. Here is an example of what useState Hook looks like:

       import { useState } from 'react';

const [variable, setVariable] = useState<boolean>(true);
const [stringArray, setStringArray] = useState<string[]>([]);

Before using the Hook, we need to Import it from the React library. I like to see that four parts in the useState are changeable. You have two variables in an array: the variable itself and the other is a function you call to set the variable straight forward. On the right side, we have the type of Boolean. In this case, it can be any type we want. Having this isn’t required if you leave it as useState(true). React will know that it is a Boolean, and lastly, we have the initial state, which is set to false. This is where you can have the initial value to be whatever you want when the component first renders. Now that we understand the parts that relate to the useState Hook, we will see an example.

            <div> {variable} </div>
    <Button onClick={setVariable(false)}>
        Click Me
    </Button>

Before the button is clicked, the variable will show as true because that is the initial state we had it set to. After clicking the button, the component will re-render and display the updated variable to be false. UseState is asynchronous and essential to remember because you might want to use the variable right after using setVariable, but update until the re-render.

        const [variable, setVariable] = useState<boolean>(true);

if (variable) {
    setVariable(false);
    console.log(variable)
}

Expectations will lead you to believe that the console.log will display false, but that isn’t the case. You will not be able to access the new variable until there has been a re-render. Now let’s move on to useEffect which helps you makes update when something changes.
This Hook can get tricky quickly and is difficult to get correctly.

    	import { useEffect } from 'react';

useEffect(() => {
    console.log('hello world');
}, []);

There are two parts to useEffect. The first argument is the closure/function that contains what you want to run the useEffect. The second part is the array towards the end of the useEffect. This array is how you can choose when the useEffect runs. In the array, you can add any variable that will result in this useEffect running when changed. Here is a quick example.

const [variable, setVariable] = useState<boolean>(true);

 useEffect(() => {
     console.log('hello world');
 }, [variable]);

 <Button onClick={setVariable(false)}>
    Click Me
 </Button>

This useEffect will run only once when the button is clicked. The variable will change from the useState, and will cause the useEffect to run. A couple of things to note about the useEffect are that; the first time it will run is when the component that’s using it is mounted. And if the array is empty, then useEffect will only run once. One thing that makes the useEffect tricky is when calling a function in useEffect. If useEffect is not added to the array, it will cause a warning. You can ignore the warning, and the code will run just fine. To get rid of the warning, you can add the array’s function, but that can cause an issue in that it might continue running useEffect multiple times and feels less controlled. One thing that can fix the warning is adding the function within the useEffect. That won’t cause unnecessary re-rendering and will get rid of the warning.

These two Hooks will give you a good start in understanding React because almost all components you create will use those two. Learning about these two Hooks gave me a much better understanding of React and I moved deeper into the React world.