If you've looked at any React app, chances are you've seen useState and useEffect being used with the component code. If you aren't really sure the purpose of these React Hooks, you've come to the right place.
React Hooks
To start, let's explain what a React Hook is. As explained by the React team themselves, "Hooks let you use different React features from your components. You can either use the built-in Hooks or combine them to build your own. This page lists all built-in Hooks in React". Basically, React Hooks allow you to work with some very useful React features that will save you a lot of time. The two most commonly used React Hooks are useState and useEffect. All Hooks start with the word "use".
useState
The React Hook useState allows you to add a state-tracking variable (with setter) to your component. It's very simple to initialize. At the top of your React function, before any returns, simply add the useState call with this syntax:
const [variable, setVariable] = useState(initialValue);That's it! Make sure to not call useState from regular JavaScript functions, outside a function component, or inside any loops, conditions, or nested functions.
After the above useState call, you can now access the value of the variable using "variable" and you can update the value with "setVariable". The initial value can be any type. It can be an integer, array, string, boolean. It can even be an object. An example of a useState call with an obejct as a state would be:
const [user, setUser] = useState({
username: "",
active: true,
age: 0
});There is also a callback pattern that can be used to update the state using the current state. For example:
const incrementCount = () => {
setState((count) => count + 1);
};useEffect
The React Hook useEffect allows you to run some code every time the component re-renders anything. The syntax for useEffect is like this:
useEffect(() => {
console.log("Something was re-rendered");
});If you add the above code to your component, you should see the console log "Something was re-rendered" every time the component updates any prop. You might be wondering whether there's a way for useEffect to run only when a specific prop is updated. The answer is yes! The second argument of useEffect is a dependency list. When nothing is passed, useEffect will run whenever any prop is updated. If an argument is provided, useEffect will only run when the props in the list are updated. The code would look like this:
useEffect(() => {
console.log("someProp was re-rendered");
}, [someProp]);Now, you should see the log "someProp was re-rendered" every time someProp changes. This is useful if you want to tie some behavior to a specific prop changing.
Since the second argument is a list, you can pass as many dependency props as you would like. Additionally, if you want to run useEffect only when the component is mounted and unmounted, you can pass an empty list as an argument.
Comments