Hooks also make your life easier by providing some convenient features. Among these hooks, we have useMemo and useCallback that help improve your website's performance.

In today's tutorial, we are going to discuss both the useMemo and useCallback hooks. You'll learn the difference between them and when to use each hook.

The useMemo Hook

The useMemo hook memoizes the return value of an expensive calculation between renders. Memoizing means storing the value as a cached value so that the value need not be calculated again (unless it's required).

useMemo is a hook used for optimising the performance of your renders. Normally, when you declare a variable inside a component, it gets re-created on every render. If it stores the return value of a function, then the function gets called every time your component renders.

Normally, this wouldn't be a problem. But, what if the function is expensive? What if it takes a longer time to execute? Take the following example:

function calculate() {
  let result = 0;
  for (let i = 0; i < 1000000000; i++) {
    result += i;
  }
  return result;
}

function App1() {
  const [count, setCount] = useState(0);

  const value = calculate();

  return (
    <div className="App">
      <button onClick={() => setCount(count + 1)}>Increment Count</button>
      <p>Count: {count}</p>
    </div>
  );
}

When you click on 'Increment Count', it takes a few seconds to update the count state. This is because the calculate function runs every time a component re-renders after state change.

Now, imagine if there were multiple state variables in the component, each serving its own purpose. Each state update would cause a re-render and execute this expensive function.

These state variables could be completely unrelated to the expensive calculation performed, which would cause unnecessary delays. This would affect the performance of your website and could lead to a terrible user experience.

useMemo can help you tackle this issue. Let's first understand its syntax:

const value = useMemo(expensiveFunction, [...dependencyArray])

The useMemo hook should be declared at the top level of your component. It takes the following arguments:

• expensiveFunction contains the expensive calculation you want to perform. If you have declared the function outside, pass the function reference only, without the brackets. You can also pass arrow functions directly.

• dependencyArray contains list of dependencies for the hook. The expensive function will be called only when one of these dependencies is updated. You can pass state variables or props that are dependent on this calculation. Any other state updates will not trigger the function.

On the first render, useMemo returns the result of expensiveFunction and caches the result. During the subsequent renders, it will return the cached value if no dependencies have changed. If they change, then it will call the function again.

Let's use this in our case:

const [dependentCount, setDependentCount] = useState(10);

const value = useMemo(calculate, [dependentCount]);

return (
  <div className="App">

    // ...

    <button onClick={() => setDependentCount(dependentCount + 1)}>
      Increment Dependent Count
    </button>
    <p>Dependent Count: {dependentCount}</p>
  </div>
);

We have created another state dependentCount that we assume is dependent on the expensive calculation. When this state updates and renders the component, the calculate function will run.

But if any other state changes, then useMemo will return the cached value instead of running the function again.

Let's test this by adding a console.log inside the function:

Output with useMemo

Now, when you click "Increment Count", the rendering is faster, since the calculate function is not getting called on every render. This is the same during every other state update not listed in the useMemo dependency array.

But when you click on "Increment dependent Count", it takes time to render the updated value. This is because dependentCount is a dependency of useMemo and changing it calls the expensive function, so the component takes time to re-render.

In this way, with useMemo, you can control the execution of an expensive function by calling it only for state updates that actually need the value returned. This can drastically improve your app's performance.

When to use useMemo:

• When you have a state dependent on an expensive calculation, but you don't want to run the calculation on every render.

• When you declare an array or object inside a component, its reference changes on every render, even though the value remains the same. Wrapping the values inside useMemo maintains referential equality and prevents unnecessary re-renders. This is essential when there's a useEffect dependent on the array or object.

• When you are rendering lists using Array.map that do not need to change unless a certain state value changes.

The useCallback Hook

Similar to useMemo, you can also use this hook to optimise performance. The useCallback hook memoizes a callback function and returns it.

Note that the useCallback hook memoizes the function itself, not its return value. useMemo caches the functions return value so that the function need not execute again. useCallback caches the function definition or the function reference.

A function declared inside a component gets re-created on every component render, similar to a variable. The difference is, it gets rendered with a different reference every time. So, a useEffect dependent on this function will execute again on each render. A similar thing happens with child components.

Let's take an example:

const App = () => {
  const [count, setCount] = useState(0);
  const [value, setValue] = useState("");

  const handleClick = () => {
    setValue("Kunal");
  };
  return (
    <div className="App">
      <button onClick={() => setCount(count + 1)}>Increment Count</button>
      <p>Count: {count}</p>
      <p>Value: {value}</p>
      <SlowComponent handleClick={handleClick} />
    </div>
  );
};

const SlowComponent = React.memo(({ handleClick, value }) => {

  // Intentially making the component slow
  for (let i = 0; i < 1000000000; i++) {}

  return (
    <div>
      <h1>Slow Component</h1>
      <button onClick={handleClick}>Click Me</button>

    </div>
  );
});

Here, we have a SlowComponent as the child of the App component. When a parent component renders, all of its child components render, regardless of whether anything has changed inside them.

To avoid unnecessary renders of the child components, we generally use the React.memo function. This basically caches the component and only re-renders it if its props have changed.

Now, when you click on 'Increment Count', it still takes a long time to render, because SlowComponent re-renders on state change. But why is that? We're not changing any of its props.

On the surface, we may not appear to change the value of handleClick prop. But, since functions are re-created with a different reference, on every render of the App component, its child (that is SlowComponent) renders.

To maintain referential equality, we wrap this function's definition inside a useCallback.

Let's understand its syntax:

const cachedFn = useCallback(fn, [...dependencyArray])

useCallback takes the following arguments:

• fn is the function you want to cache. It is the function definition that you want to create, and can take any arguments and return any value.

• dependencyArray is a list of dependencies, changes to which trigger re-creation of the function. You can pass state values or props that are dependent on this function.

On the first render, React creates the function (does not call it) and caches it. On the subsequent renders, the cached function is returned to you. Remember, this hook returns and caches the function and not its return value.

Let's use this hook in our example:

import { useCallback } from "react";

const App = () => {

  // ...

  const handleClick = useCallback(() => {
    setValue("Kunal");
  }, [value, setValue]);

  // ...
};

Here, we have wrapped the function inside a useCallback and passed two dependencies that are involved with this function.

Now, when you click on 'Increment Count', the rendering is much faster. This is because the handleClick reference is cached between renders and hence, SlowComponent does not re-render.

But when you click on the button inside SlowComponent it will re-render. This is because when the value state changes, the handleClick method is created again and so the props of the slow component have changed.

Value takes time to render

You can add many more states to the App component and update them without inhibiting performance as long as you don't update value's state.

When to use useCallback

• When you have event handlers defined for an element inside your component, wrap them inside a useCallback to avoid unnecessary re-creations of event handlers.

• When you call a function inside a useEffect, you usually pass the function as a dependency. To avoid using useEffect unnecessarily on every render, wrap the function definition inside a useCallback.

• If you are writing a custom hook, and it returns a function, it is recommended to wrap it inside a useCallback. So, there's no need for the users to worry about optimizing the hook – rather, they can focus on their own code.

Differences Between useMemo and useCallback

Let's summarize the differences between the two hooks:

• useMemo caches the return value of a function. useCallback caches the function definition itself.

• useMemo is used when you have an expensive calculation you want to avoid on every render.

• useCallback is used to cache a function to avoid re-creating it on every re-render.

• useMemo makes sure that an expensive function should only be called for state values dependent on it.

• useCallback creates stable functions that maintain the same reference between renders. This avoids unnecessary rendering of child components.

And here are a few more things to remember. Use these hooks only if you want to memoize expensive calculations or prevent unnecessary re-renders. Do not use useMemo and useCallback everywhere.

For regular functions, these hooks don't make much difference. Overusing them will make your code unreadable. Instead, you can figure out other ways to improve app performance.

Conclusion

useMemo and useCallback are useful hooks in React that can help you optimize performance of your web app. It is important to understand the difference between the two and their usages.

In this article, we have discussed how both hooks work. useMemo caches the result of an expensive calculation, while useCallback caches the function reference. We also listed down scenarios when you should use each hook. Together, both these hooks can make your website faster.

I hope this article helps clear up any confusion. If you have further questions or comments regarding the post, reach out to me on Twitter. I would love to hear suggestions. Till next time, goodbye!

If you are having a tough time understanding what the useReducer is and how it works, this article is for you. However, a good knowledge of how states works is essential to understand what will be covered in this piece. You can read about React states here: State Management In React. You can then join us on the ride to the useReducer land when you are done. If you are already familiar with states, lets go!

Before we go any further, it is important to note that the useState and useReducer hooks are similar in some ways.

How Does useReducer Compare to the useState Hook?

• They both involve a current state value, and have a function that triggers a state update and an initial state value passed as an argument.
• The useReducer is an alternative to the useState hook for managing state in functional components. The useReducer hook is better suited for managing complex state logic while useState is best for simple state changes.

When the state logic becomes too complicated or when you need to handle state changes in a more predictable and manageable way, the useReducer hook is your best bet.

What is useReducer?

A useReducer is a hook in React that allows you add a reducer to your component. It takes in the reducer function and an initialState as arguments. The useReducer also returns an array of the current state and a dispatch function.

const [state, dispatch] = useReducer(reducer, initialState);

Let's familiarize ourselves with what the parameters mean:

• state: represents the current value and is set to the initialState value during the initial render.
• dispatch: is a function that updates the state value and always triggers a re-render, just like the updater function in useState.
• reducer: is a function that houses all the logic of how the state gets updated. It takes state and action as arguments and returns the next state.
• initialState: houses the initial value and can be of any type.

Deep dive into useReducer

Having seen the parts that makes up a useReducer hook, it is time to take a closer look into how it operates.

To use useReducer in your React app, call it at the top level of your component.

import { useReducer } from "react";

We can now use the useReducer hook in our component.

export default function App() {
  const [state, dispatch] = useReducer(reducer, initialState);

  return(
  )
 }

To see our useReducer hook in action, we will build a very simple counter app that increments by 1 when an increment button is clicked and decrements by 1 when a decrement button is clicked.

Firstly, let us take a closer look at the important reducer function. This function determines how the state gets updated and contains all the logic through which the next state will be calculated.

Basically, reducers house the logic that is usually placed inside of an event handler when using useState. This makes it easier to read and debug when you are not getting desired results. A quick look at the reducer function can save you the stress.

The reducer function is always declared outside of your component and takes in a current state and action as arguments.

function reducer(state, action) {
}

An action is an object that typically has a type property which identifies a specific action. Actions describe what happens and contains information necessary for the reducer to update the state.

Conditional statements are used to check the action types and perform a specified operation that would return a new state value. Conditional statements like if and switch can be used in reducers.

Dispatch Function

This is a function returned by the useReducer hook and is responsible for updating state to a new value. The dispatch function takes the action as its only argument.

We can place the dispatch function inside an event handler function. Remember, actions come with a type property so we have to specify when we call the dispatch function. For our counter app, we have two event handlers that increase and decrease the count.

function handleIncrement() {
    dispatch({ type: "increment" });
  }

  function handleDecrement() {
    dispatch({ type: "decrement" });
  }

Now, we'll go back to our reducer function and use the switch condition to evaluate the action.type expression.

function reducer(state, action) {
  switch (action.type) {
    case "increment":
      return { ...state, count: state.count + 1 };
    case "decrement":
      return { ...state, count: state.count - 1 };
    default:
      return "Unrecognized command";
  }
}

In the above code,

• The reducer function takes both the state and action as an argument.
• We conditionally check for a specific case of the action.type expression string.
• If true, a shallow copy of the state is taken by the use of the spread operator and the count value in state is evaluated.
• A new state is returned after evaluation has been completed.
• The default serves a fallback when no matching case is found.

The entire logic of our counter app has been done. We can now return our JSX with the state of count to be displayed on the user interface and the handler functions passed to the onClick event handler for the buttons.

return (
    <>
      <h1>Count:{state.count}</h1>
      <button onClick={handleIncrement}>Increment</button>
      <button onClick={handleDecrement}>Decrement</button>
    </>
  );

Our counter app is set and the count state will be updated accordingly when the buttons are clicked.

What Happens Behind the Hood?

The action of clicking the button triggers a dispatch function that sends an information of type to the reducer function. The dispatching (clicking of the button) causes a re-render of the component. The reducer function conditionally matches the case with the type from the action object and updates the state accordingly after evaluation has taken place.

NOTE: At dispatch, the reducer function still holds the old value. This means that the dispatch function only updates the state variable for the next render. To check this out, we can log the state and action arguments to the console before the switch statement:

function reducer(state, action) {
  console.log(state, action);

  switch (action.type) {
    case "increment":
      return { ...state, count: state.count + 1 };
    case "decrement":
      return { ...state, count: state.count - 1 };
    default:
      return "Unrecognized command";
  }
  }

After clicking the increment button to increase the count twice, here is what is logged to the console:

state and action type logged to the console

The above image shows that, at the first click, there was an action type of increment made and the initial state value was 0. At the second click, the state value updated to 1, and was displayed as the current count state. I hope you get it now.

Enough of the code gibberish, let's look at a real-world example of the reducer function.

Real-world Reducer Example

Picture a dispatcher that works for an online shopping company going to a warehouse to get the goods/items they would later distribute to the people that ordered them.

The dispatcher identifies themself and performs an action of claiming the goods meant for dispatch to the warehouse manager. The manager goes to a box that contains orders shipped and locates the goods meant to be given to the dispatcher. The manager also logs into the inventory system and does the evaluations before handing over the goods to the dispatcher.

This scenario can also be translated as:

• The dispatcher makes a request for an update or triggers a process like the dispatch function.
• The dispatcher performs an action of 'claiming goods' like the dispatch action with a type property.
• The warehouse manager does the necessary sorting and updating just like the reducer function.
• The box that houses all the goods is updated depending on how many are cleared for dispatch. This acts like the state update.

I hope this real-world scenario makes the entire process clearer to you.

Take a look at the full code once again and digest the process.

import { useReducer } from "react";

function reducer(state, action) {
  console.log(state, action);
  switch (action.type) {
    case "increment":
      return { ...state, count: state.count + 1 };
    case "decrement":
      return { ...state, count: state.count - 1 };
    default:
      return "Unrecognized command";
  }
}
const initialState = { count: 0 };
export default function App() {
  const [state, dispatch] = useReducer(reducer, initialState);

  function handleIncrement() {
    dispatch({ type: "increment" });
  }
  function handleDecrement() {
    dispatch({ type: "decrement" });
  }
  return (
    <>
      <h1>Count:{state.count}</h1>
      <button onClick={handleIncrement}>Increment</button>
      <button onClick={handleDecrement}>Decrement</button>
    </>
  );
}

Benefits of Using the useReducer Hook

• Helps centralize state logic.
• Makes state transitions predictable.
• Suitable for complex state management.
• Optimizes performance.

Conclusion

We have covered what the useReducer hook is, how it compares to useState – similarities and differences, the reducer process and the benefits of using useReducer.

If you found this article helpful, you can buy me a coffee.

You can also connect with me on LinkedIn .

See you on the next one!

One of the interesting things about the Hook features is that they let you use React without classes. This, in turn, helps simplify your codebase and helps you write cleaner and more intuitive code.

In this article, you will learn how to make use of the common Hooks in your project.

React Hooks Benefits

Let's go over some of the reasons why you might want to use Hooks in your project:

• Easy to use and understand: With Hooks, you can write more straightforward code. These Hook commands can only be written inside a functional component.

• Reusable code: Hooks allow you to reuse a particular logic used in one component across multiple other components.

• Better optimization performance: Hooks offer a more efficient approach to utilizing React functionalities like state and lifecycle functions, resulting in improved performance as compared to class components in some situations.

Different Types of React Hooks

The React Hook features are of different types, ranging from the useState, useEffect, useRef, useReducer, and so on.

React Hook Rules

There are a few important rules when it comes to the React Hook features that should be strictly followed. Let's go over them in the following sections.

Hooks should be called inside a React function

Hooks should not be used inside a class component – they can and should only be called inside the React function.

This first rule essentially specifies that a Hook component should not be found in a class component, but in a functional component.

Here is the wrong way of implementing the Hook feature:

import React, { Component } from 'react';
import React, {useState} from react;

class App extends Component {
 const [count, setCount] = useState(0);

  render() {
    return (
      <div>
        <h1>Hello, I am a Class Component!</h1>
      </div>
    );
  }
}

export default App;

And here is the correct way of implementing the Hook feature:

import React, { useState } from 'react';

function App() {
  const [userName, setUsername] = useState('');

  };

  return ( Your JSX code goes in here.....);
};

export default App;

The code example above shows a proper way of using a Hook feature.

If you use a Hook feature in a class component, just like in the first example, your code will raise an error. Therefore, you can only implement a Hook inside a function component.

Hooks can only be called at the top level of a component

You can only implement/call a React Hook at the top level of a component before any other code.

Using the code from the previous section as an example, you can see that immediately after function App ().

The next thing that comes is the Hook command – in that example we used the useState Hook. That is what the second rule is all about.

Hooks cannot be used in a conditional statement

We have different types of conditional statements/rendering ranging from if, else, and so on.

The above rule means that conditionals cannot be applied directly to Hooks. This is the case because Hooks are called in the same order on every render of a functional component.

You can conditionally run Hooks within a functional component, but for this to work, this condition must be determined by top-level logic and should not be nested within any other blocks or components.

The reason for this is because Hooks need to be invoked at the highest level of the component, rather than under conditions, loops, or nested functions.

Here is an example:

import React, { useState, useEffect } from 'react';

function ConditionalEffectComponent() {
  const [isMounted, setIsMounted] = useState(false);

  useEffect(() => {
    if (isMounted) {
      // Perform some effect when the component is mounted
      console.log('Component mounted');
    }
  }, [isMounted]); // Dependency array ensures effect runs when isMounted changes

  return (
    <div>
      <button onClick={() => setIsMounted(!isMounted)}>
        {isMounted ? 'Unmount' : 'Mount'}
      </button>
    </div>
  );
}

export default ConditionalEffectComponent;

From the example above, the useEffect hook is executed conditionally dependent on the value of the isMounted state variable.

Clicking the button causes the value of isMounted to alternate, either activating or deactivating the effect depending on the updated value.

This is deemed appropriate because the Hook is invoked at the highest level of the component and its condition is determined by the overarching logic within the component.

How to Use the useState Hook

The React useState Hook enables you to have state variables in functional components.

To make use of the state Hook, you must first import it into your project by using the import command.

The way useState works is that it gives us two variables. The first variable is known as the value of the state, and the second variable is a function used to update the state.

Here is an example of how to go about this:

import './App.css'
import React, { useState } from 'react';

function App() { 

    const [count, setCount] = useState(0); 

return ( 
    <div>
        <p>You clicked {count} times</p>
        <button onClick={() => setCount(count + 1)}> Click me
        </button>
    </div>
    ); 
}

export default App;

From the code example above, you can see that the state Hook was used in a functional component and not a class component.

count and setCount are the two variables of the state Hook, where count is the current value of the state and setCount is used to update the value of the state. Therefore, whenever the button is clicked, setCount will update the value of the count.

How useState Hook works

How to Use the useEffect Hook

The useEffect hook in React is like a handy tool for functional components. It helps manage tasks that aren't directly related to showing stuff on the screen, like fetching data from the internet, retrieving data from API endpoints, or setting up timers. It can be used to update components even after they've been shown, making your app more dynamic.

Here's a basic example of how useEffect is used to fetch data from an API endpoint:

import React, { useState, useEffect } from 'react';

function MyComponent() {
  const [data, setData] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch('https://api.example.com/data');
        const jsonData = await response.json();
        setData(jsonData);
      } catch (error) {
        console.error('Error fetching data:', error);
      }
    };

    fetchData(); // Call the fetchData function when the component mounts or updates

    // Cleanup function (optional) to handle unsubscriptions or resource cleanup
    return () => {
      // Cleanup logic here, if needed
    };
  }, []); // Empty dependency array means the effect runs only once after the initial render

  return (
    <div>
      {/* Render the fetched data */}
      {data && (
        <ul>
          {data.map(item => (
            <li key={item.id}>{item.name}</li>
          ))}
        </ul>
      )}
    </div>
  );
}

export default MyComponent;

In the code example above, MyComponent is a functional component which utilizes React hooks, specifically useState and useEffect, to handle state management and execute side effects. The useState hook is used to initialize a state variable called data. This variable will store the data retrieved from an API endpoint.

The useEffect hook is used to request data from the API endpoint once the component initially renders. Within the useEffect, an asynchronous function fetchData is defined to fetch JSON data from the specified API endpoint using the fetch API.

If the data fetching is successful, the returned JSON data is saved in the data state variable using the setData function supplied by the useState hook.

The useEffect hook also optionally returns a cleaning function, which is currently empty but can be used for any necessary cleanup logic.

In the component's JSX, the fetched data is conditionally rendered. If the data is not null, a list <ul> is produced using items extracted from the data array using map.

Finally, the MyComponent function is exported as the default export from the module, allowing it to be imported and utilized in other sections.

Conclusion

As a developer, React Hooks are a very useful and powerful tool for functional components that make your work easy.

I believe that at this point you now know what a React Hook is and how to use the most popular ones.

Thanks for reading, and happy coding!

Today I will help you create your first custom hook and explain how they can improve your codebase.

Why Create Custom Hooks?

You might be wondering – why would I even want to create new React hook? In the end, React has all the essential hooks in place and anything else seems slightly excessive. That's true React comes with many powerful hooks, but did you know that custom hooks can improve the quality of your code?

Imagine you have a piece of React code that's used across many components. As a programmer, you don't want to repeat yourself, and you make repeated code reusable as much as possible. That's why it's a good idea to wrap those snippets into utilities, components, or custom hooks.

Crafting your own hooks will not only simplify your components, but also significantly reduce the size of your codebase. Remember, less code typically means better readability and lower code complexity, too.

I hope I have you "hooked" now – pun intended.

🛠️ Prerequisites**

Before you read this guide, you need to be familiar with React. Don't get me wrong – you don't need to be an expert, but some understanding of the basics are necessary.

If you don't feel like a strong enough React dev, you might consider enrolling in my Udemy course where you will learn React 18 by creating a 2048 game from scratch. You can find more details and a discount code at the end of this tutorial.

Also, you can check out this free tutorial where you'll learn the key concepts you need to get started with React.

🪝 Your First Custom Hook – usePreviousProps

In my articles, I'm always trying to use real world examples – and this guide will not be any different. We will create a hook responsible for tracking previous values of component props. This means we will build a custom hook called usePreviousProps from scratch.

One of the most common use cases for a hook like this is when you're dealing with animations. For instance, imagine that you need to highlight a newly created element. How could you determine if it's new without comparing current values to previous ones? That's where our new hook comes into play.

The benefits of a custom hook like ours might be a bit vague, but it's a really powerful tool. Literally, the custom usePreviousProps hook we'll create today is used in some of my open source projects, and even a few production-grade apps I've built. So you can be sure this hook has a real use case, and it only takes 12 lines to implement.

Now let's get our hands dirty!

🪚 How to Create a Custom Hook

First, we need to create a new file in the hooks directory of your project – I decided to call it use-previous-props.js.

Keep in mind that React hooks rarely use JSX syntax (HTML), which is why we are using the .js extension. If you need to enable JSX syntax need to change the extension to .jsx. But think twice before doing this – if you really need JSX, you should probably crate a standalone component instead of a hook.

// file: hooks/use-previous-props.js

import { useEffect, useRef } from "react";

export default function usePreviousProps(value) {
  const ref = useRef();

  useEffect(() => {
    ref.current = value;
  });

  return ref.current;
}

As you can see, our hook is very similar to a regular functional component. The only difference is the return statement – it returns a JavaScript value instead of an HTML element.

React hooks often return values, functions, or both. For example, the useState hook returns an array with two elements: the current state value and a function to update that value.

Now let me explain how the usePreviousProps hook actually works:

• const ref = useRef() is used to persist the reference across re-renders of the component. In our case, we will use it to store the previous value.
• The useEffect hook will update ref.current value whenever the component re-renders. This means that when value changes, the ref.current value will be updated to store the most recent value of the prop. Importantly, all of this happens after the component finishes rendering, so it stores the previous value during the re-render.
• return ref.current returns the value from the ref reference.

Now our custom usePreviousProps hook is ready to use!

😎 How to Use a Custom Hook

Last week I published the tutorial How to Create Animations in React 18.

If you didn't read my last tutorial, it includes the custom usePreviousProps hook to create highlighting animations:

Highlighting animation

Here is the code responsible for this animation:

export default function Tile({ value }) {
  const [scale, setScale] = useState(1);

  const previousValue = usePreviousProps(value);
  const hasChanged = previousValue !== value;

  useEffect(() => {
    if (hasChanged) {
      setScale(1.1);
      setTimeout(
          () => setScale(1), 
          100 /* 100ms == 0.1s */
      );
    }
  }, [hasChanged, setScale]);

  const style = {
    transform: `scale(${scale})`
  };

  return (
    <div className="tile" style={style}>
      {value}
    </div>
  );
};

Let's focus on this line: const previousValue = usePreviousProps(value).

Here, previousValue contains the previous value for this component. If it's a new component it returns undefined.

On the next line, the hasChanged constant helps determine if the component should be highlighted. If it's new and returned undefined earlier, it triggers the highlighting animation.

A few lines later, I declared the useEffect hook that will check if a component has changed its value. If that happened, React will execute the highlighting animation.

🏁 Summary

Today you've learned that React hooks are fairly similar to functional components. The only difference is their output, where they return JavaScript values, arrays, or functions rather than JSX elements.

As you can see, creating custom hooks isn't rocket science, and I hope I've inspired you to experiment and create one of your own.

If this article helped you, please share it on your social media or give me a shout-out on Twitter. Thank you!

🏫 Would You Like to Build Your Own 2048 Game?**

If you want to improve your React skills, consider joining my online course on Udemy. I will help you to get started with React 18 by building a fully-functional 2048 Game. I believe creating games makes learning more fun, and you'll have something cool to show your friends.

Also, I'm giving a 50% discount for freeCodeCamp readers. Just use the code 50DISCOUNT to enroll.

👇👇👇👇

🧑‍🎓 Join my React 18 course on Udemy

What you'll learn:

• How to build 2048 game with React 18 and Next.js.
• Essential React hooks such as useState, useRef, useCallback, useEffect, and many more.
• Managing state using Reducer and React Context.
• How to create responsive mobile apps that support touch events (like mobile swiping).
• Integrate TypeScript into your React projects.
• Testing React apps.

One common requirement in web development projects is the ability to delay the execution of certain tasks. That's where setTimeout comes into play.

Consider scenarios where you want to create smooth transitions, display loading spinners, or implement animations. In these cases, delaying the execution of specific actions allows you to control the timing of visual elements, providing a more polished and user-friendly interface.

In this article, we'll explore how to leverage setTimeout in React, specifically using React Hooks. React Hooks are functions that let you use state and other React features in functional components. If you're new to React Hooks or just want to learn more about using setTimeout effectively, you're in the right place.

Here's what we'll cover:

1. How Does setTimeout Work?
2. Set Up a React Project
3. How to Use setTimeout in Functional Components
4. How to Handle User Interactions with setTimeout
5. How to Handle Dynamic Delays with setTimeout
6. How to Handle Multiple setTimeouts in Sequence
7. How to Handle Multiple setTimeouts in Async Operations
8. How to Cancel setTimeout Functions
9. How to Use setTimeout with Promises
10. How to Use setTimeout with async/await
11. Conclusion

How Does setTimeout Work?

Before we dive into using setTimeout in a React application, let's briefly understand what setTimeout is and how it works in JavaScript.

setTimeout is a built-in JavaScript function that allows you to schedule the execution of a function after a specified amount of time. Its basic syntax looks like this:

setTimeout(callback, delay);

• callback: A function to be executed after the specified delay.
• delay: The time (in milliseconds) to wait before executing the callback function.

For example, the following code snippet will log "Hello, World!" to the console after a delay of 2000 milliseconds (2 seconds):

setTimeout(() => {
  console.log("Hello, World!");
}, 2000);

Now that we have a basic understanding of setTimeout, let's see how we can integrate it with React using Hooks.

Set Up a React Project

To follow along with the examples in this article, you'll need a basic understanding of React, and Node.js installed on your machine.

For those already familiar with setting up a React project, you can skip the following steps. If not, you can create a new React project using Create React App with the following commands (or use the build tool of your choice):

npx create-react-app my-react-app
cd my-react-app
npm start

Replace "my-react-app" with your preferred project name. The npm start command launches the development server, and you can access your React application at http://localhost:3000.

How to Use setTimeout in Functional Components

In React, functional components are a lightweight way to define UI components. With the introduction of Hooks in React 16.8, functional components can now use state and other features that were previously exclusive to class components.

Let's start by creating a simple functional component and using setTimeout within it.

Open the src/App.js file and replace its contents with the following code:

import React, { useState, useEffect } from 'react';

const DelayedMessage = () => {
  const [message, setMessage] = useState('');

  useEffect(() => {
    // Use setTimeout to update the message after 2000 milliseconds (2 seconds)
    const timeoutId = setTimeout(() => {
      setMessage('Delayed message after 2 seconds!');
    }, 2000);

    // Cleanup function to clear the timeout if the component unmounts
    return () => clearTimeout(timeoutId);
  }, []); // Empty dependency array ensures the effect runs only once

  return (
    <div>
      <h1>{message}</h1>
    </div>
  );
};

function App() {
  return (
    <div className="App">
      <DelayedMessage />
    </div>
  );
}

export default App;

In this example, we've created a functional component called DelayedMessage. Inside this component, we use the useState hook to manage the state of the message variable. The useEffect hook is used to handle side effects, such as asynchronous operations, in functional components.

Within the useEffect hook, we use setTimeout to update the message state after a delay of 2000 milliseconds. We also provide a cleanup function using clearTimeout to ensure that the timeout is cleared if the component unmounts before the timeout completes.

Now, when you run your React application (npm start), you should see the message "Delayed message after 2 seconds!" rendered on the screen after a brief delay.

How to Handle User Interactions with setTimeout

In the previous example, we explored a scenario where setTimeout was used to simulate a delayed action triggered by a button click. While this demonstrates the basic usage of setTimeout in response to user interaction, it's essential to emphasize the importance of handling user input validation in real-world applications.

import React, { useState } from 'react';

const DelayedAction = () => {
  const [actionStatus, setActionStatus] = useState('Idle');
  const [delayDuration, setDelayDuration] = useState(3000);

  const handleButtonClick = () => {
    setActionStatus('Action in progress...');

    // Use setTimeout to simulate a delayed action
    setTimeout(() => {
      setActionStatus('Action completed!');
    }, delayDuration);
  };

  return (
    <div>
      <p>Status: {actionStatus}</p>
      <button onClick={handleButtonClick}>Trigger Delayed Action</button>
      <input
        type="number"
        value={delayDuration}
        onChange={(e) => setDelayDuration(parseInt(e.target.value, 10))}
      />
    </div>
  );
};

export default DelayedAction;

Importance of User Input Validation

In scenarios where user input directly influences the behavior of setTimeout or other time-related operations, validating that input becomes crucial. Failing to validate user input can lead to unexpected behavior, potential errors, or even security vulnerabilities.

In the code snippet above, we have an input field that allows users to specify the delay duration in milliseconds. It's essential to note that the setDelayDuration function is wrapped with parseInt to ensure that the input is converted to a valid integer. This step helps prevent issues arising from non-numeric or negative input values.

<input
  type="number"
  value={delayDuration}
  onChange={(e) => setDelayDuration(parseInt(e.target.value, 10))}
/>

By validating user input, you can ensure that the delay duration remains within expected boundaries, mitigating the risk of unexpected behavior.

Incorporating input validation practices is a fundamental aspect of building robust and secure React applications, especially when dealing with asynchronous operations tied to user actions.

How to Handle Dynamic Delays with setTimeout

In some cases, you may want to dynamically set the delay duration based on certain conditions or user input. Let's modify the previous example to allow users to input the delay duration through a text input field.

Update the src/App.js file with the following code:

import React, { useState } from 'react';

const DynamicDelayAction = () => {
  const [actionStatus, setActionStatus] = useState('Idle');
  const [delayDuration, setDelayDuration] = useState(3000);

  const handleButtonClick = () => {
    setActionStatus('Action in progress...');

    // Use setTimeout with dynamically set delay duration
    setTimeout(() => {
      setActionStatus('Action completed!');
    }, delayDuration);
  };

  const handleInputChange = (e) => {
    const value = parseInt(e.target.value, 10);
    setDelayDuration(isNaN(value) ? 0 : value); // Set delayDuration to 0 if NaN
  };

  return (
    <div>
      <h2>Action Status: {actionStatus}</h2>
      <label>
        Delay Duration (milliseconds):
        <input type="text" value={delayDuration} onChange={handleInputChange} />
      </label>
      <button onClick={handleButtonClick}>Trigger Delayed Action</button>
    </div>
  );
};

function App() {
  return (
    <div className="App">
      <DynamicDelayAction />
    </div>
  );
}

export default

 App;

In this example, we've introduced a text input field to allow users to input the delay duration in milliseconds. The delayDuration state variable is updated based on user input, and the handleInputChange function ensures that the input is a valid integer.

The handleButtonClick function then uses setTimeout with the dynamically set delay duration. Users can now specify the delay duration through the text input field, giving them control over when the action will be completed.

Note: While using setTimeout with dynamically set delays provides flexibility, it's essential to be mindful of potential performance implications. When delays are frequently updated based on user input or other dynamic factors, it may lead to a higher frequency of timer creation and destruction.

Creating and clearing timers excessively can impact the overall performance of your application, especially if the delays are very short. Consider optimizing your code or exploring alternative approaches, such as debouncing user input or using a more sophisticated scheduling mechanism, if you encounter performance issues.

How to Handle Multiple setTimeouts in Sequence

In some scenarios, you might need to execute multiple setTimeout functions in sequence, creating a chain of delayed actions. Let's explore how to achieve this by creating a component that displays a countdown with multiple steps.

Update the src/App.js file with the following code:

import React, { useState, useEffect } from 'react';

const Countdown = () => {
  const [countdown, setCountdown] = useState(5);

  useEffect(() => {
    const countdownInterval = setInterval(() => {
      // Decrease the countdown value every second
      setCountdown((prevCountdown) => prevCountdown - 1);
    }, 1000);

    // Cleanup function to clear the interval when the component unmounts
    return () => clearInterval(countdownInterval);
  }, []); // Empty dependency array ensures the effect runs only once

  useEffect(() => {
    // Use setTimeout to reset the countdown after it reaches 0
    if (countdown === 0) {
      setTimeout(() => {
        setCountdown(5); // Reset the countdown to 5 seconds
      }, 2000); // Delay before resetting (2 seconds)
    }
  }, [countdown]); // Effect re-runs whenever countdown changes

  return (
    <div>
      <h2>Countdown: {countdown}</h2>
    </div>
  );
};

function App() {
  return (
    <div className="App">
      <Countdown />
    </div>
  );
}

export default App;

In this example, we've created a Countdown component that displays a countdown value. The countdown starts from 5 and decreases by 1 every second using setInterval. When the countdown reaches 0, a setTimeout function is used to reset the countdown to 5 after a delay of 2000 milliseconds (2 seconds).

The key takeaway here is the use of multiple useEffect hooks. The first useEffect initializes the countdown interval, and the cleanup function ensures that the interval is cleared when the component unmounts. The second useEffect monitors the countdown state and triggers the countdown reset when it reaches 0.

By running the application, you'll observe the countdown resetting to 5 after reaching 0, creating a cyclic sequence of delayed actions.

How to Handle Multiple setTimeouts in Async Operations

The use of multiple useEffect hooks is crucial for managing asynchronous actions in a controlled manner. Each useEffect hook serves a specific purpose.

Countdown Initialization: The first useEffect initializes the countdown interval using setInterval. By having a dedicated useEffect for this initialization, we ensure that the interval is set up only once when the component mounts. The cleanup function associated with this useEffect clears the interval when the component is unmounted, preventing memory leaks.

Countdown Reset: The second useEffect monitors the countdown state and triggers the countdown reset when it reaches 0. This separation of concerns enhances code readability and maintainability. If both functionalities were combined into a single useEffect, it could lead to a less organized and harder-to-understand code structure.

Using multiple useEffect hooks with focused responsibilities promotes better code organization and makes it easier to reason about the asynchronous behavior in your component.

Consider a slideshow component where each image is displayed for a specific duration before transitioning to the next one. By chaining multiple setTimeout functions, you can create a smooth and automated slideshow experience for users.

const startSlideshow = () => {
  setTimeout(() => {
    // Display first image
  }, 0);

  setTimeout(() => {
    // Display second image after a delay
  }, 3000);

  setTimeout(() => {
    // Display third image after a delay
  }, 6000);
  // ...
};

This sequential execution pattern allows you to orchestrate the timing of different actions, providing a more controlled and organized user experience

How to Cancel setTimeout Functions

Cancelling a setTimeout function is essential to preventing unintended behavior, especially when dealing with dynamic delays or component unmounting. The clearTimeout function can be used to cancel a scheduled timeout.

Consider the following example where a timeout is set to update a message after a delay:

import React, { useState, useEffect } from 'react';

const DelayedMessage = () => {
  const [message, setMessage] = useState('');

  useEffect(() => {
    const timeoutId = setTimeout(() => {
      setMessage('Delayed message after 2 seconds!');
    }, 2000);

    // Cleanup function to clear the timeout if the component unmounts
    return () => clearTimeout(timeoutId);
  }, []); // Empty dependency array ensures the effect runs only once

  return (
    <div>
      <h1>{message}</h1>
    </div>
  );
};

export default DelayedMessage;

In this example, the clearTimeout function is used in the cleanup function of the useEffect hook. If the component unmounts before the timeout completes, the cleanup function ensures that the timeout is cleared, preventing the update of state on an unmounted component.

How to Use setTimeout with Promises

JavaScript's setTimeout can be combined with Promises to create more readable and flexible asynchronous code. The setTimeout function itself doesn't return a Promise, but we can wrap it in a Promise to leverage async/await syntax.

Consider the following example:

const delay = (milliseconds) => new Promise(resolve => setTimeout(resolve, milliseconds));

const exampleFunction = async () => {
  console.log('Start');
  await delay(2000);
  console.log('After 2 seconds');
};

exampleFunction();

In this example, the delay function returns a Promise that resolves after the specified number of milliseconds. The exampleFunction uses async/await to wait for the delay to complete before moving on to the next step. This pattern is especially useful when dealing with asynchronous operations that involve timeouts.

How to Use setTimeout with async/await

Combining setTimeout with async/await allows for cleaner and more readable asynchronous code. While setTimeout itself doesn't directly return a Promise, we can wrap it in a Promise to await the delay.

Consider the following example:

const delay = (milliseconds) => new Promise(resolve => setTimeout(resolve, milliseconds));

const exampleFunction = async () => {
  console.log('Start');
  await delay(2000);
  console.log('After 2 seconds');
};

exampleFunction();

In this example, the delay function returns a Promise that resolves after the specified number of milliseconds. The exampleFunction uses async/await to wait for the delay to complete before moving on to the next step.

This pattern is especially useful when dealing with asynchronous operations that involve timeouts.

Conclusion

In this guide, we've covered the basics of using setTimeout in a React application using functional components and React Hooks.

We started with a simple example of displaying a delayed message and gradually explored more complex scenarios, including handling user interaction, dynamically setting delay durations, and chaining multiple setTimeout functions in sequence.

Understanding how to use setTimeout effectively in React can enhance your ability to create responsive and interactive user interfaces. By combining the power of React Hooks with setTimeout, you can implement various asynchronous behaviors in a clean and maintainable way.

As you continue your journey with React development, consider exploring other React Hooks and additional JavaScript concepts to broaden your skills. Happy coding!

One of the most noteworthy additions is the introduction of hooks, which revolutionized the way developers manage state and side effects in functional components.

In this guide, we'll explore three fundamental hooks for beginners: useState, useEffect, and useContext.

Introduction to React Hooks

Before hooks, stateful logic in React was primarily managed using class components.

With the advent of functional components and hooks, developers gained a more concise and expressive way to handle state and lifecycle methods. Hooks allow you to use state and other React features without writing a class.

What are React Hooks?

React hooks are functions that enable functional components to use state and lifecycle features that were previously only available in class components. They were introduced in React 16.8 to provide a more consistent way to manage stateful logic in functional components.

How to Use the useState Hook

The useState hook is perhaps the most basic and essential hook in React. It enables you to add state to your functional components, allowing them to keep track of data that changes over time. Let's dive into how useState works with a simple example.

Basic Usage of useState

import React, { useState } from 'react';

const Counter = () => {
  // Declare a state variable named 'count' with an initial value of 0
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
};

export default Counter;

In this example, we import the useState hook from the 'react' library. The useState function returns an array with two elements: the current state value (count) and a function (setCount) to update it. We initialize count to 0, and clicking the "Increment" button increases its value.

How to Use Multiple useState Hooks

You can use the useState hook multiple times in a single component to manage different pieces of state independently. Let's modify our Counter component to include a second piece of state.

import React, { useState } from 'react';

const Counter = () => {
  const [count, setCount] = useState(0);
  const [isEven, setIsEven] = useState(false);

  return (
    <div>
      <p>Count: {count}</p>
      <p>{isEven ? 'Even' : 'Odd'}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
      <button onClick={() => setIsEven(!isEven)}>Toggle Even/Odd</button>
    </div>
  );
};

export default Counter;

Now, our Counter component has two independent pieces of state: count and isEven. Clicking the "Toggle Even/Odd" button will switch the value of isEven.

How to Use the useEffect Hook

The useEffect hook is used to perform side effects in your functional components, such as fetching data, subscribing to external events, or manually changing the DOM. It combines the functionality of componentDidMount, componentDidUpdate, and componentWillUnmount in class components.

Basic Usage of useEffect

import React, { useState, useEffect } from 'react';

const DataFetcher = () => {
  const [data, setData] = useState(null);

  useEffect(() => {
    // Fetch data from an API
    fetch('https://api.example.com/data')
      .then((response) => response.json())
      .then((result) => setData(result))
      .catch((error) => console.error('Error fetching data:', error));
  }, []); // Empty dependency array means this effect runs once after the initial render

  return (
    <div>
      {data ? (
        <ul>
          {data.map((item) => (
            <li key={item.id}>{item.name}</li>
          ))}
        </ul>
      ) : (
        <p>Loading data...</p>
      )}
    </div>
  );
};

export default DataFetcher;

In this example, the useEffect hook is used to fetch data from an API when the component mounts. The second argument of useEffect is an array of dependencies. If the dependencies change between renders, the effect will run again. An empty array means the effect runs once after the initial render.

Cleaning Up in useEffect

Sometimes, side effects need to be cleaned up, especially when dealing with subscriptions or timers to prevent memory leaks. The useEffect hook can return a cleanup function that will be executed when the component unmounts.

import React, { useState, useEffect } from 'react';

const Timer = () => {
  const [seconds, setSeconds] = useState(0);

  useEffect(() => {
    const intervalId = setInterval(() => {
      setSeconds((prevSeconds) => prevSeconds + 1);
    }, 1000);

    // Cleanup function to clear the interval when the component unmounts
    return () => clearInterval(intervalId);
  }, []); // Empty dependency array for initial setup only

  return <p>Seconds: {seconds}</p>;
};

export default Timer;

In this example, the setInterval function is used to update the seconds state every second. The cleanup function returned by useEffect clears the interval when the component is unmounted.

How to Use the useContext Hook

The useContext hook is used to consume values from a React context. Context provides a way to pass data through the component tree without having to pass props manually at every level. Let's explore how useContext works with a simple example.

How to Create a Context

First, let's create a context to hold a user's authentication status.

import React, { createContext, useContext, useState } from 'react';

const AuthContext = createContext();

export const AuthProvider = ({ children }) => {
  const [isAuthenticated, setIsAuthenticated] = useState(false);

  const login = () => {
    setIsAuthenticated(true);
  };

  const logout = () => {
    setIsAuthenticated(false);
  };

  return (
    <AuthContext.Provider value={{ isAuthenticated, login, logout }}>
      {children}
    </AuthContext.Provider>
  );
};

export const useAuth = () => {
  return useContext(AuthContext);
};

In this example, we create an AuthContext using createContext and provide an AuthProvider component. The AuthProvider component wraps its children with the context provider and includes functions for logging in and out.

How to Use useContext

Now, let's use the useContext hook in a component to access the authentication status.

import React from 'react';
import { useAuth } from './AuthContext';

const AuthStatus = () => {
  const { isAuthenticated, login, logout } = useAuth();

  return (
    <div>
      <p>User is {isAuthenticated ? 'logged in' : 'logged out'}</p>
      <button onClick={login}>Login</button>


      <button onClick={logout}>Logout</button>
    </div>
  );
};

export default AuthStatus;

Here, the useAuth hook is used to access the values provided by the AuthContext. The AuthStatus component displays the user's login status and provides buttons to log in and out.

Putting It All Together

Let's create a more complex example that combines useState, useEffect, and useContext in a single component. Suppose we have a component that fetches user data from an API and displays it, taking into account the user's authentication status.

import React, { useState, useEffect } from 'react';
import { useAuth } from './AuthContext';

const UserProfile = () => {
  const { isAuthenticated } = useAuth();
  const [userData, setUserData] = useState(null);

  useEffect(() => {
    if (isAuthenticated) {
      // Fetch user data when authenticated
      fetch('https://api.example.com/user')
        .then((response) => response.json())
        .then((result) => setUserData(result))
        .catch((error) => console.error('Error fetching user data:', error));
    }
  }, [isAuthenticated]); // Run the effect when isAuthenticated changes

  return (
    <div>
      {isAuthenticated ? (
        <div>
          <h2>Welcome, {userData ? userData.name : 'User'}!</h2>
          <p>Email: {userData ? userData.email : 'Loading...'}</p>
        </div>
      ) : (
        <p>Please log in to view your profile.</p>
      )}
    </div>
  );
};

export default UserProfile;

In this example, the UserProfile component uses the useAuth hook to check the user's authentication status. If authenticated, it fetches the user data and displays a personalized welcome message. If not authenticated, it prompts the user to log in.

Conclusion

React hooks, including useState, useEffect, and useContext, have transformed the way developers write components by providing a more intuitive and flexible approach to managing state and side effects.

As you continue your journey with React, mastering these hooks will empower you to build more efficient and maintainable applications.

Remember, practice is key to becoming proficient with React hooks. Experiment with different scenarios, explore additional hooks like useReducer and useCallback, and stay up-to-date with the React documentation for any new features or best practices. Happy coding!

This means that components can perform specific tasks at different stages of their existence, from the moment they are created to the point they are removed from the user interface.

Lifecycle methods have been a fundamental part of React for many years. But with the introduction of hooks, React's approach to managing state and side effects in functional components has become more intuitive and flexible.

Just a quick note: although hooks generally replace class components, there are no plans to remove classes from React.

Why This Guide?

In this tutorial, you will learn about class component lifecycle methods such as componentDidMount, componentDidUpdate, componentWillUnmount, and shouldComponentUpdate.

You'll also explore React hooks like useState, useEffect, and useContext, and understand why they were introduced. This will make your React journey smoother and more enjoyable.

Whether you're just getting started with React or looking to deepen your understanding, this guide will equip you with the knowledge you need to build responsive and interactive web applications using React's powerful tools.

Let's dive in and uncover the magic of React lifecycle methods and hooks.

How the Component Lifecycle Works

In React, components go through a lifecycle composed of distinct stages. Each of these stages offers specific methods that you can customize to run code at various moments during a component's existence.

These methods help you perform tasks such as initializing data, managing updates, and tidying up resources as needed.

Class Component Lifecycle Methods

Let's start by looking at the class component lifecycle methods. These were the primary way to manage component lifecycle before the introduction of hooks.

How to use componentDidMount:

This is called after a component has been inserted into the DOM. It's a great place to perform initial setup tasks, like fetching data from an API or setting up event listeners.

Code example:

import React, { Component } from 'react';

class MyComponent extends React.Component {
  constructor() {
    super();
    this.state = {
      data: null,
    };
  }

  componentDidMount() {
    // This is where you can perform initial setup.

    // In this example, we simulate fetching data from an API after the             component has mounted.
    // We use a setTimeout to mimic an asynchronous operation.
    setTimeout(() => {
      const fetchedData = 'This data was fetched after mounting.';
      this.setState({ data: fetchedData });
    }, 2000); // Simulate a 2-second delay
  }

  render() {
    return (
      <div>
        <h1>componentDidMount Example</h1>
        {this.state.data ? (
          <p>Data: {this.state.data}</p>
        ) : (
          <p>Loading data...</p>
        )}
      </div>
    );
  }
}

export default MyComponent;

In this example, we created a class component called MyComponent. In the constructor, the component's state is initialized with data set to null, and we use it to store the fetched data.

In the componentDidMount method, we simulate fetching data from an API using setTimeout to mimic an asynchronous operation. After 2 seconds (2000 milliseconds), the component's state updates with the fetched data.

In the render method, content is conditionally rendered based on the data state. If data is null, a Loading data... message is displayed. Otherwise, the fetched data is displayed.

When you use this component in your application, you'll notice that the Loading data... message is shown initially, and after 2 seconds, the fetched data is displayed. This demonstrates how componentDidMount is useful for performing tasks after a component has been added to the DOM.

How to use componentDidUpdateB:

This is called after a component has re-rendered due to changes in its state or props. It's a great place to handle side effects or perform additional actions based on those changes.

Code Example:

import React, { Component } from 'react';

class Counter extends React.Component {
  constructor() {
    super();
    this.state = {
      count: 0,
    };
  }

  // This method will be called when the "Increment" button is clicked
  handleIncrement = () => {
    this.setState({ count: this.state.count + 1 });
  };

  // componentDidUpdate is called after the component updates
  componentDidUpdate(prevProps, prevState) {
    // You can access the previous props and state here
    console.log('Component updated');
    console.log('Previous state:', prevState);
    console.log('Current state:', this.state);
  }

  render() {
    return (
      <div>
        <h1>Counter</h1>
        <p>Count: {this.state.count}</p>
        <button onClick={this.handleIncrement}>Increment</button>
      </div>
    );
  }
}

export default Counter;

In this code example, we create a Counter class component with a constructor that initializes the count state to 0. The handleIncrement method updates the count state when the Increment button is clicked.

Inside the componentDidUpdate lifecycle method, we log a message (Component updated) to the console. We also log both the previous state (prevState) and the current state (this.state). This demonstrates how you can access both the previous and current values during an update. The render method displays the current count and a button to increment it.

Now, when you use this Counter component in your application, open the browser's console. Every time you click the Increment button, you'll see messages in the console indicating that the component has updated, along with the previous and current state values.

You can use componentDidUpdate for various purposes, such as making network requests when props or state change, updating the DOM based on state changes, or interacting with third-party libraries after an update. It provides a way to perform actions that should occur specifically after a component has re-rendered.

How to use componentWillUnmount

This is called just before a component is removed from the DOM. It's a crucial place to perform cleanup tasks, such as clearing timers, unsubscribing from events, or releasing resources to prevent [memory leaks](https://en.wikipedia.org/wiki/Memory_leak#:~:text=In computer science%2C a memory,longer needed is not released.).

Let's illustrate a simple React component that sets up a timer when it mounts, using componentDidMount method, and clears that timer when it unmounts using the componentWillUnmount method.

Code example:

import React, { Component } from 'react';

class TimerComponent extends React.Component {
  constructor() {
    super();
    this.state = {
      seconds: 0,
    };
    this.timer = null; // Initialize the timer
  }

  // When the component mounts, start the timer
  componentDidMount() {
    this.timer = setInterval(() => {
      this.setState({ seconds: this.state.seconds + 1 });
    }, 1000); // Update every 1 second (1000 milliseconds)
  }

  // When the component unmounts, clear the timer to prevent memory leaks
  componentWillUnmount() {
    clearInterval(this.timer);
  }

  render() {
    return (
      <div>
        <h1>Timer Component</h1>
        <p>Elapsed Time: {this.state.seconds} seconds</p>
      </div>
    );
  }
}

export default TimerComponent;

In this example, we created the TimerComponent class. Inside the constructor, the component's state is initialized with a seconds property, which we'll use to keep track of the elapsed time. The timer variable is also set to null.

In the componentDidMount lifecycle method, the timer is started by using setInterval. This timer increments the seconds state property every second.

In the componentWillUnmount lifecycle method, the timer is cleared using clearInterval to ensure that it doesn't continue running after the component has been removed from the DOM.

In the render method, the elapsed time is displayed based on the seconds state property.

When you use this TimerComponent in your application and render it, you'll notice that the timer starts when the component is mounted and stops when the component is unmounted. This is thanks to the cleanup performed in the componentWillUnmount method. This prevents resource leaks and ensures that
the timer is properly managed throughout the component's lifecycle.

How to use shouldComponentUpdate

We use this lifecycle method to control whether a component should re-render when its state or props change. It is particularly useful for optimizing performance by preventing unnecessary renders.

Let's create a simple React class component and use the shouldComponentUpdate method to decide whether the component should re-render based on changes in its state.

Code Example:

import React, { Component } from 'react';

class Counter extends React.Component {
  constructor() {
    super();
    this.state = {
      count: 0,
    };
  }

  shouldComponentUpdate(nextProps, nextState) {
    // Allow the component to re-render only if the count is even
    if (nextState.count % 2 === 0) {
      return true; // Re-render
    }
    return false; // Don't re-render
  }

  incrementCount = () => {
    this.setState((prevState) => ({ count: prevState.count + 1 }));
  };

  render() {
    return (
      <div>
        <h1>Counter Example</h1>
        <p>Count: {this.state.count}</p>
        <button onClick={this.incrementCount}>Increment</button>
      </div>
    );
  }
}

export default Counter;

In this example, we created the Counter class component that maintains a count state, which starts at 0. In the shouldComponentUpdate method, we check whether the next state's count is even. If it is, we allow the component to re-render. Otherwise, we prevent the re-render.

The incrementCount method is called when the Increment button is clicked. It updates the count state by incrementing it.

In the render method, the current count and a button to increment it is displayed.

If you click the Increment button and the count becomes an odd number, the component won't re-render. This behavior demonstrates how shouldComponentUpdate can be used to optimize rendering in situations where not all state changes should trigger a re-render.

Introducing React Hooks

React introduced hooks in version 16.8. They granted functional components access to state and various React features without writing class components.

As a result, class components have become largely unnecessary. Hooks simplify component logic and make it more reusable.

Why use Hooks?

Hooks were introduced to address several issues and make React code easier to understand and maintain:

• Complexity – class components can become complex when managing state and side effects.

• Reusability – logic in class components isn't easily shareable between components.

• Learning Curve – class components introduce a steeper learning curve for newcomers to React.

Commonly used React Hooks

The useState hook

useState lets you add state to functional components. It returns an array with the current state value and a function to update it.

Code Example:

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

In this example, we used the useState hook to manage a counter's state. When the Increment button is clicked, setCount updates the count state, causing the component to re-render with the updated value.

The useEffect hook

useEffect is used for side effects in functional components, similar to componentDidMount and componentDidUpdate. It runs after rendering and can be controlled by specifying dependencies.

Code Example:

import React, { useState, useEffect } from 'react';

function Example() {
  const [data, setData] = useState(null);

  useEffect(() => {
    // Fetch data from an API
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => setData(data));
  }, []); // Empty dependency array, runs only once

  return <div>{data ? data.message : 'Loading...'}</div>;
}

In this example, useEffect is used to fetch data from an API when the component mounts. The empty dependency array [] ensures that the effect runs only once.
When the data is fetched, setData updates the data state, causing a re-render with the fetched information.

The useContext hook

useContext allows functional components to access context values. It's a way to pass data down the component tree without explicitly passing props.

Code Example:

import React, { useContext } from 'react';

// Create a context
const MyContext = React.createContext();

function MyComponent() {
  const value = useContext(MyContext);

  return <div>Context Value: {value}</div>;
}

In this example, we create a context called MyContext. The useContext hook allows MyComponent to access the value stored in this context. It's a powerful tool for managing global state in your application.

Benefits of custom hooks

Custom hooks are functions that use hooks internally and can be reused across multiple components. They help encapsulate and share complex logic.

Here's an example of a custom hook called useLocalStorage that simplifies storing and retrieving data in the browser's local storage:

import { useState } from 'react';

function useLocalStorage(key, initialValue) {
  // Retrieve the stored value from local storage
  const storedValue = localStorage.getItem(key);

  // Initialize the state with the stored value or the initial value
  const [value, setValue] = useState(storedValue || initialValue);

  // Update the local storage whenever the state changes
  const setStoredValue = (newValue) => {
    setValue(newValue);
    localStorage.setItem(key, newValue);
  };

  return [value, setStoredValue];
}

export default useLocalStorage;

In this custom hook, we import useState from React because we'll use it to manage the state. The useLocalStorage function takes two parameters:

• key: A string representing the key under which the data will be stored in local storage.

• **initialValue**: The initial value for the state.

Inside the hook, we first attempted to retrieve the stored value from local storage using localStorage.getItem(key). Then we initialized the state variable value using useState, using the storedValue if it exists or the initialValue if not.

Next, we defined a function setStoredValue that updates both the state and the local storage when called. It sets the new value in local storage using localStorage.setItem(key, newValue).

Finally, we returned an array [value, setStoredValue] as the hook's return value, allowing components to access the stored value and update it as needed.

Here's an example of how you can use the useLocalStorage hook in a component:

import React from 'react';
import useLocalStorage from './useLocalStorage'; // Import the custom hook

function App() {
  // Use the custom hook to manage a "username" stored in local storage
  const [username, setUsername] = useLocalStorage('username', 'Guest');

  const handleInputChange = (e) => {
    setUsername(e.target.value);
  };

  return (
    <div>
      <h1>Hello, {username}!</h1>
      <input
        type="text"
        placeholder="Enter your username"
        value={username}
        onChange={handleInputChange}
      />
    </div>
  );
}

export default App;

In this example, we import the useLocalStorage custom hook and use it to manage a username value in local storage. The component initializes the username state using the hook and updates it when the input field changes.

The value is stored and retrieved from local storage, allowing it to persist across page reloads.

Custom hooks are a powerful way to encapsulate and reuse complex logic in React applications, making your code more modular and maintainable.

Conclusion

React provides developers with powerful tools to manage the lifecycles of their components. These lifecycles allow components to perform specific tasks at different stages of their existence, from creation to removal.

In this guide, we've explored React's class component lifecycle methods. These methods have been a fundamental part of React for many years and continue to be relevant in certain scenarios.

You've also been introduced to React Hooks. These have become the preferred way to manage state and side effects in React applications. They offer a more intuitive and flexible approach to building components.

While hooks have gained popularity and generally replace the need for class components, it's important to note that there are no plans to remove class components from React. Existing codebases and third-party libraries may still use class components, so understanding both class component lifecycles and hooks is
valuable for React developers.

In summary, React's lifecycle methods and hooks are crucial for building dynamic and efficient applications, and they offer developers a range of options to manage component behavior and state. As you continue to explore and work with React,
you'll find that having a solid understanding of both lifecycles and hooks will make you a more versatile and capable React developer.

If you found this guide helpful and enjoyable, please give it a like. For more insightful tutorials, follow me on X for updates 🙏.

Enjoy your coding!

As you become more proficient at coding in React, performance will become a major focal point in your development process.

As with any tool or programming methodology, caching plays a huge role when it comes to optimizing React applications.

Caching in React typically goes by the term memoization. It's used to improve performance by reducing the amount of times a component renders due to state or prop mutations.

React provides two APIs for caching: useMemo and useCallback. useCallback is a hook that memoizes a function, while useMemo is a hook that memoizes a value. These two hooks are often used in conjunction with the Context API to further improve efficiency.

Here’s a basic list of topics we’ll be covering in this article:

1. React caching default behavior.
2. The useMemo hook.
3. The useCallback hook.

In order to follow along, you'll need a decent understanding of React and stateful components.

Default Caching Behavior in React

By default, React uses a technique called “shallow comparison” to determine whether a component should be re-rendered. This basically means that if the props or state of a component haven’t changed, React will assume that the output of the component hasn’t changed either and won’t re-render it.

While this default caching behavior is very effective by itself, it isn’t always enough to optimize complex components that require advanced state management.

In order to achieve more control over your component’s caching and rendering behavior, React offers the useMemo and useCallback hooks.

Caching in React with the useMemo Hook

useMemo is useful when you need to do an expensive computation to retrieve a value, and you want to ensure that the computation is only performed when necessary. By memoizing the value using useMemo, you can ensure that the value is only computed when its dependencies change.

In a React component, you may have multiple properties that make up your state. If a piece of state changes that has nothing to do with our expensive value, why recompute it if it hasn’t changed?

Here’s an example code block reflecting a basic useMemo implementation:

react
import React, { useState, useMemo } from 'react';
function Example() {
const [txt, setTxt] = useState(“Some text”);
const [a, setA] = useState(0);
const [b, setB] = useState(0);
const sum = useMemo(() => {
console.log('Computing sum...');
return a + b;
}, [a, b]);
return (
<div>
<p>Text: {txt}</p>
<p>a: {a}</p>
<p>b: {b}</p>
<p>sum: {sum}</p>
<button onClick={() => setTxt(“New Text!”)}>Set Text</button>
<button onClick={() => setA(a + 1)}>Increment a</button>
<button onClick={() => setB(b + 1)}>Increment b</button>
</div>
);
}

In our Example component above, assume the sum() function performs an expensive computation. If the txt state is updated, React is going to re-render our component, but because we memoized the returned value of sum, this function will not run again at this time.

The only time the sum() function will run is if either the a or b state has been mutated (changed). This is an excellent improvement upon the default behavior, which will rerun this method upon each re-render.

Caching in React with the useCallback Hook

useCallback is useful when you need to pass a function as a prop to a child component, and you want to ensure that the function reference does not change unnecessarily. By memoizing the function using useCallback, you can ensure that the function reference remains the same as long as its dependencies do not change.

Without getting too heavy into JavaScript function references, let’s just take a look at how they can affect the rendering of your React app. When a function reference changes, any child components that receive the function as a prop will re-render, even if the function logic itself has not changed.

This is because, as we already mentioned, React does a shallow comparison of prop values to determine whether a component should re-render, and a new function reference will always be considered a different value than the previous one.

In other words, the simple act of redeclaring a function (even the same exact function), causes the reference to change, and will cause the child component that receives the function as a prop to unnecessarily re-render.

Here’s an example code block reflecting a basic useCallback implementation:

react
import React, { useState, useCallback } from 'react';
function ChildComponent({ onClick }) {
console.log('ChildComponent is rendered');
return (
<button onClick={onClick}>Click me</button>
);
}
function Example() {
const [count, setCount] = useState(0);
const [txt, setTxt] = useState(“Some text…”);
const incrementCount = useCallback(() => {
setCount(prevCount => prevCount + 1);
}, [setCount]);
return (
<div>
<p>Text: {txt}</p>
<p>Count: {count}</p>
<button onClick={setTxt}>Set Text</button>
<button onClick={setCount}>Increment</button>
<ChildComponent onClick={incrementCount} />
</div>
);
}

As you can see in the above example, we pass the incrementCount method instead of the setCount method to the child component. This is because incrementCount is memoized, and when we run our setTxt method, it won’t cause the child component to unnecessarily re-render.

The only way our child component will re-render in this example is if the setCount method runs, because we passed it as a dependency parameter to our useCallback memoization.

Conclusion

Caching is an important technique for optimizing React applications. By reducing unnecessary re-renders, caching can help to improve the performance and efficiency of your application.

React provides a default caching behavior by using a virtual DOM to compare changes in state and props, and only updating components after a shallow comparison reflects changes. This is a great optimization technique that’s sufficient in many scenarios, but sometimes more fine-grained control is desired.

The useMemo and useCallback hooks were created to achieve this fine-grained control.

useMemo is used to memoize the results of a function call, and is useful when the function is expensive to compute and the result does not change often.

useCallback is used to memoize the actual reference of a function rather than the returned value, and is used when the function is passed as a prop to child components that might cause unnecessary re-renders.

Want to learn more? To learn more check out the OhMyCrawl Blog for more programming tips for SEO.

One of the most well-known React hooks is the useState() hook. It lets you add a state variable to your component. The useState() hook can conveniently hold strings, arrays, numbers, objects and much more.

In this article, we are going to learn about the useState() hook and demonstrate its use with three different examples: a button with conditional rendering, form handling, and the famous counter.

Prerequisites

• You'll need basic knowledge of HTML, CSS and JavaScript to understand the ideas behind what you are creating in this tutorial.
• It's also helpful to have beginner's knowledge of React.
• Finally, you'll need an IDE, preferably VS Code.

Once you have your React application up and running, you are ready to use useState. To get started, you need to import useState() from React as shown below:

import { UseState } from 'react';

How Does useState() Work?

The useState() hook works by handling and managing state in your applications.

The useState() hook takes the first (initial) value of the state variable as its argument. The second value then sets your state, which is why it's always initiated as setState. So how does this work?

const [state, setState] = useState(initial values goes here)

const [calories, setCalories] = useState(initial value of calories)

In the case of the first render, it returns the initial state and updates to a different value during the re-render using the set function.

Conditional Rendering with the useState() Hook

This example allows you to update state depending on two conditions: if the user is logged in or not. This also explains why the initial state is set to false, to mean the user is not logged in.

You are going to create a login button that uses the useState() hook to render two different outcomes.

One is a sign-in button with a message asking the user to sign in. The other is a button that, once the user is signed in, gives them the choice to sign out.

import React from 'react'

const Signin = () => {
  return (
    <div>
        <div>
            <button type="button">Sign Out</button>
            <p>Welcome back, good to see you in here<p>
        </div>
        <div>
            <button type="button">Sign In</button>
            <p>Please Sign in</p>
        </div>
    </div>
  )
}

export default Signin;

To implement the sign in and sign out functionalities, you will have to import useState(). Then you'll need to use conditional rendering to specify how the buttons will respond to a click.

import React, { useState } from 'react'

const Signin = () => {
    const [signedin, setSignedin] = useState(false)

    const handleSignin = () => {
        setSignedin(true)
    }

    const handleSignout = () => {
        setSignedin(false)
    }
  return (
         <div>
           { signedin ? ( 
        <div>
            <button type="button" onClick={handleSignout}>Sign Out</button>
            <p>Welcome back, good to see you in here</p>
        </div>) :

        (<div>
            <button type="button"onClick={handleSignin}>Sign In</button>
            <p>Please Sign in</p>
        </div>)
           }
        </div>
  )
}

export default Signin;

What's happening in the code above?

First, you created a variable with the useState() hook that sets signedin to false. Why? Because on the first load, you don't want the user to be signed in. But once they click the sign in button, they can 'get in'.

Also, note that you imported the useState() hook at the top.

You then created variables that handle signing in, signing out, and setting the set function to true and false, respectively – that is handleSignin and handleSignout.

After that, you created an onClick handler that listens for a click on the button and triggers an action. This action is directed by the Conditional (ternary) Operator.

So how does the ternary operator work? Here's what the MDN has to say:

"The conditional (ternary) operator is the only JavaScript operator that takes three operands: a condition followed by a question mark (?), then an expression to execute if the condition is truthy followed by a colon (:), and finally the expression to execute if the condition is falsy.

This operator is frequently used as an alternative to an if...else statement."

This means that if you click the sign in button, you are ushered in and receive the welcome message. Once you click the sign out button, you are prompted to sign in, with the 'please sign in' message.

How to Use the useState() Hook in a React Counter App

This example will help show how you can use useState() to update your state through clicks.

The idea behind this simple counter is that your clicks are counted. So, if you click the button 12 times the counter updates to 12. Note that the button updates on every click/count.

import React from 'react';


const Newcounter = () => {
    return (
        <div>
            <button type="button">You will see the count here</button>
        </div>
    )
}


export default Newcounter;

To make the counter functional, you need to use the hook as shown below (and once again, don't forget to import useState() before using it):

const [count, setCount] = useState(0)

You will then create another variable that increments the counts from 0 to 1, 2, 3....

const incrementCount = () => { setCount (count + 1) }

You can now go forth and return the incremented count using the onClick handler as shown below:

import React, { useState } from 'react';


const Newcounter = () => {
    const [count, setCount] = useState(0)

    const incrementCount = () => {
        setCount(count + 1)

    }
    return (
        <div>
            <button type="button" onClick={incrementCount}>You clicked  
            {count} times</button>
        </div>
    )
}


export default Newcounter;

How to Use the useState() Hook in a Form in React

Forms utilise useState() by allowing the developer to set an empty state that uses the set function to handle what the user type in as their input.

Here, you basically want to to collect the name and email of users through a form and then submit the info.

Below is a simple form to demonstrate how the useState() hook makes this possible.

Here's the form you'll be working with:

import React from 'react'

const Theform
 = () => {
  return (
    <div>
        <form>
            <input type="text" placeholder="enter your name" required />
            <input type="email" placeholder="enter your email" required />
            <button type="submit">Submit</button>
        </form>

    </div>
  )
}

export default Theform;

You will need to import the hook to your file. After that, use the useState hook to set the name and email to null as you wait for the user to input their details.

Afterwards, you will create an arrow function with the handleSubmit that executes the preventDefault() method. console.log the name of the user and their email so you can get these details using the onSubmit() event handler.

Once that's done you can then use the set function for both the name and email to target a change in the input and get the value of the input which you initialised as user and email in your useState() hook.

Remember that the useState hook uses that set function for re-rendering. In this, you are re-rendering the new values the user has added in the form. That's why you are setting the value in your input as value={user}.

import React, { useState }from 'react'

const Theform
 = () => {

  const [user, setUser] = useState('')
  const [email, setEmail] = useState('')

  const handleSubmit = (e) => {
    e.preventDefault()
    console.log(user, email)

  }
  return (
    <div>
        <form onSubmit={handleSubmit}>
            <input type="text" placeholder="enter your name"  onChange={(e) 
            => {setUser(e.target.value)}} value ={user} required />

            <input type="email" placeholder="enter your email" onChange={(e)  
            => {setEmail(e.target.value)}} value={email} required />
            <button type="submit">Submit</button>

        </form>

    </div>
  )
}

export default Theform;

Conclusion

In this article you have learned about the useState() hook in React by considering three different examples. Remember, just like all other React Hooks, the useState() hook abides by the general rules of React hooks.

The useEffect hook in React has become a common tool for managing side effects in functional components. But there's a common pitfall when using it: the potential for infinite loops. These can cause performance issues and disrupt the intended behavior of components.

In this tutorial, we will explore how to prevent infinite loops when using useEffect in React.

You use the useEffect hook in functional components in React to manage side effects, such as fetching data from an API, updating the DOM, or subscribing to events that are external to React.

Situations that Cause Infinite Loops

Missing Dependencies

One common mistake that can cause infinite loops is not specifying a dependency array. useEffect checks if the dependencies have changed after every render of the component.

So, when no dependencies are provided, the effect will run after every single render, which can lead to a continuous loop of updates if state is being updated.

For example, consider the following code:

function ExampleComponent(){
    const [count, setCount] = useState(0);

    useEffect(() => {
        setCount((count) => count+1);
    });
}

In this example, the following occurs:

• When the component initially renders, the effect will run.
• When the effect is run, it updates a count state, resulting in the component being re-rendered.
• Since the component is re-rendered, it causes the useEffect to run again.
• This causes the count state to update again, and goes on forever.

Animation showing process of an infinite loop caused by useEffect

This happened because there isn't any dependency array specified, indicating that the effect should be run every time after the component re-renders.

To avoid this, add an empty dependency array:

function ExampleComponent(){
    const [count, setCount] = useState(0);

    useEffect(() => {
        setCount((count) => count+1);
    }, []);
}

This will ensure that the effect is only executed after the initial rendering of the component.

Alternatively, if your effect depends on a certain state, remember to add it as a dependency:

function ExampleComponent(){
    const [isLoggedIn, setIsLoggedIn] = useState(false);

    useEffect(() => {
        // logic
    }), [isLoggedIn];
}

That way, the effect is only run initially and when the dependency has changed after the component has re-rendered.

Using References as Dependencies

In JavaScript, data types can be categorized as being reference values or primitive values.

Primitive values are basic data types such as Strings, Booleans, Numbers, Null and Undefined.

On the other hand, reference values are more complex data types such as Arrays and Objects.

Types of primitive and reference values in JavaScript

When a reference value is assigned to a variable, the value and location to that value is stored and the variable will only point to that location.

Whereas with a primitive value, the variable is directly assigned to the primitive's value. The value is stored on a stack, a data structure used to store static data.

With reference values such as Functions and Objects, they are stored in a heap, a data structure used for dynamic memory allocation, which is useful when storing complex data types.

The variable is then assigned to the location in the stack, which points to the reference value in the heap.

A Heap is a data structure used to store reference values

This is helps make our applications more efficient. Imagine having to create a duplicate of a complex object every time it is re-assigned to a new variable! Instead, the new variable can just point to the same location in the heap.

As useful as it is, reference values can be problematic when used as a dependency. This is because React will compare the location of the reference value if it is used as a dependency instead of the value's contents.

For example, consider the component:

function ExampleComponent(props){
    const [count, setCount] = useState(1);
    let data = {
        a: 1,
        b: 2
    };
    useEffect(() => {
        setCount((count) => count+1);
        //other logic
    }, [data]);
}

In this case, the following occurs:

• When the component initially renders, the effect is run
• When the effect is run, the state is updated. This causes the component to be re-rendered
• When the component is re-rendered, a new data object is created, so its reference location is different from the previous
• This causes the effect to run again since the dependency data object has changed
• The cycle repeats, causing an infinite loop

To prevent this from happening, we can use the useRef hook. It allows us to re-use the same value between re-renders.

This hook allows us to store values that will persist between renders, so the object's reference location will be the same throughout all render cycles.

function ExampleComponent(props){
    const [count, setCount] = useState(1);
    const data = useRef({
        a: 1,
        b: 2,
    });
    useEffect(() => {
        setCount((count) => count+1);
        // logic
    }, [data.current]);

    // rest of component
}

The useRef hook takes in an initial value and returns a single object with a property called current.

The current property will be the value passed into the useRef hook, and will be the same throughout all renders of the component.

This ensures the effect doesn't run in an infinite loop since the dependency in the useEffect hook will no longer change with each render of the component.

Note that you can also change the value of the data.current property. For example:

data.current = {c: 3, d: 4}

By changing the value of data.current, it will not trigger the component to re-render and React is not aware of this change.

Using Functions as Dependencies

Another reason that useEffect may be causing an infinite loop is if you use a function as a dependency.

Since a function is a reference value in JavaScript, we encounter the same issue with using objects as dependencies.

For example, if we have a function in our component, the function will be re-created every time the component is re-rendered:

function ExampleComponent(props){
    const [count, setCount] = useState(1);
    const submitForm = (event) => {
        // logic
    };
    useEffect(() => {
        setCount((count) => count+1);
        // logic
    }, [submitForm]);

    // rest of component
}

So when the component initially renders:

• The effect is run initially, causing the count state to update
• Since the state has been updated, the component re-renders, causing the submitForm function to be re-created
• The effect will run again as the submitForm dependency of the useEffect hook has changed
• When the effect runs again, the count state is updated and the loop goes on

To avoid the function from being re-created every time the component is re-rendered, we can use the useCallback hook:

function ExampleComponent(props){
    const [count, setCount] = useState(1);
    const submitForm = useCallback((event) => {
        // logic
    }, []);
    useEffect(() => {
        setCount((count) => count++);
        // logic
    }, [submitForm]);

    // rest of component
}

The useCallback hook also accepts two arguments, the first being the function that needs to be cached and stored without changing between renders, and the second being a dependency array. If the dependencies in the useCallback hook changes, the function is re-created.

So, similar to using useEffect, we can use an empty dependency array to ensure the function isn't being re-created between renders.

This prevents the effect from running in an infinite loop when a function is used as a dependency.

Summary

The useEffect hook in React is necessary when working with side effects in your React components. But even with experience, common mistakes can lead to infinite loops in your components. Be sure to watch out for missing dependencies, and using references or functions as dependencies when that happens.

We also took a look at how to use the useRef and useCallback hooks to prevent objects from being re-created in between renders.

If you enjoy my writing, consider checking out my YouTube channel for more.

Happy coding!

But as your application grows, state updates become more and more complex. These complex state updates might get overwhelming when you revisit your code.

There is a different way of handling state updates, and that's by using reducers. But what are reducers? How do you use them? What does the useReducer hook do? In this post, I'll answer all these questions.

What Is a Reducer and Why do You Need It?

Let's take an example of a To-Do app. This app involves adding, deleting, and updating items in the todo list. The update operation itself may involve updating the item or marking it as complete.

When you implement a todo list, you'll have a state variable todoList and make state updates to perform each operation. However, these state updates may appear at different places, sometimes not even inside the component.

To make your code more readable, you can move all your state updates into a single function that can exist outside your component. While performing the required operations, your component just has to call a single method and select the operation it wants to perform.

The function which contains all your state updates is called the reducer. This is because you are reducing the state logic into a separate function. The method you call to perform the operations is the dispatch method.

How the useReducer Hook Works

You can add a reducer to your component using the useReducer hook. Import the useReducer method from the library like this:

import { useReducer } from 'react'

The useReducer method gives you a state variable and a dispatch method to make state changes. You can define state in the following way:

const [state, dispatch] = useReducer(reducerMethod, initialValue)

The reducer method contains your state logic. You can choose which state logic to call using the dispatch method. The state can also have some initial value similar to the useState hook.

useReducer Hook Example

Let's take a simple example where we have a list of users. We can add a new user, delete an existing user, and update user details. Normally, we would create a state variable user and perform state updates at different places.

Let's try doing the same using reducers:

const [users, dispatch] = useReducer(reducerMethod, userData);

Use the following initial data:

const userData = [
    {
        id:1,
        name: 'kunal',
        age: 22,
        admin: true
    },
    {
        id:2,
        name: 'rounak',
        age: 23,
        admin: false
    },
    {
        id:3,
        name: 'utkarsh',
        age: 22,
        admin: false
    },   
]

How to Define the Reducer Method

The reducer method contains our state updates. The method takes two arguments, the current state value and an action object. The action object contains the type of the action and additional data needed to perform the update.

We'll perform three types of updates – for user added, updated, and deleted. We'll use switch-case to select the type of operation to be performed.

const reducerMethod = (users, action) => {
    switch(action.type) {
        // State updates here
    }
}

The type field contains the name of the operation to be performed. This is a string and you can set any value you want. Just make sure it's relevant to the action being performed for better readability. Let's perform the add operation first:

case 'addUser': {
    return [
        ...users,
        action.newUser
    ]
}

The logic for updating state is similar to setState. Here, you return a new state value rather than making changes to the state variable directly.

Let's perform the update operation now. While performing the update operation, the dispatch method passes an updatedUser object to update an existing user. This additional data is passed through the action object.

case 'updateUser': {
    return users.map(user => {
        if(user.id == action.updatedUser.id)
            return action.updatedUser
        return user;
    })
}

Now, for the delete operation, the dispatch method passes only the id of the object so that the state array can filter it out.

case 'deleteUser': {
    return users.filter(user => user.id !== action.id)
}

Let's also have a default case if an action other than the above three is specified.

default: {
    // Handle error here
}

Now, let's create the components that would actually use this reducer.

Display the list of users in the UserDetails component with the following props:

<UsersList users={users}
           handleUpdateUser={handleUpdateUser}
           handleDeleteUser={handleDeleteUser}
 />

Also, create a form to add new users in the AddUserForm component.

<AddUserForm handleAddUser={handleAddUser} />

I have not mentioned the actual implementations of the components here, as the focus is only on the state update part.

We'll make the state updates inside the handler methods by calling the dispatch method and passing the type of the state update with some data. For the add operation, pass the new user to be added.

const handleAddUser = (user) => {
    dispatch({
        type: 'addUser',
        newUser: user
    })
}

Similarly, you can implement handleUpdateUser and handleDeleteUser.

const handleUpdateUser = (updatedUser) => {
    dispatch({
        type: 'updateUser',
        updatedUser: updatedUser
    })
}

const handleDeleteUser = (userId) => {
    dispatch({
        type: 'deleteUser',
        id: userId
    })
}

The newUser, updatedUser and userId are parameters passed from the AddUserForm and UsersList components. They contain the required data to make the state updates.

Conclusion

For any feature you create, state updates form a crucial part of the implementation in React. As the complexity of the application increases, so does the number of state updates.

In this post, I explained what a reducer is and why we need it. With the help of an example, I showed you how convenient it is to have all the state updates in one place in a separate function. This makes the code more readable and accessible.

I hope this tutorial helped eliminate any confusion regarding the useReducer hook. I have tried to explain it in very simple terms.

If you are unable to understand the content or find the explanation unsatisfactory, let me know. New ideas are always appreciated! Feel free to connect with me on Twitter. Till then, goodbye!

In this article I'm going to explain some of the most useful hooks React provides us with, how they work, and examples of situations in which we can use them.

Hope you enjoy the reading. Let's go!

Table of Contents

• A bit of history about React and what hooks are for

• Frequently used React hooks

  • UseState hook

  • UseEffect hook

  • UseContext hook

  • UseRef hook

  • UseReducer hook

• Some less common but still useful hooks

  • UseCallback hook

  • UseMemo hook

• Custom React hooks

• Round up

A bit of history about React and what hooks are for

As you may know, React is a open-source library used to build user interfaces in a simpler and more efficient way than tools that came before (vanilla JS and jQuery mainly). It was developed by Meta (aka Facebook) and released to the public in 2013.

Hooks were a feature introduced years later in 2016 (in React's 16.8 version). Just to have an idea of what hooks are for and why are they improvement over what was done before, let's view an example of "pre-hooks" code against some modern React "post-hooks" code.

In old React code, we used class components. These had a render method which contained the JSX responsible for rendering the UI.

And if we wanted this component to store a state, we had to declare it within a constructor method and change it by calling this.setState. Beneath is a short example for you to have an idea:

// javascript
import React from "react"

class Counter extends React.Component {
    constructor(props) {
      super(props)
      this.state = { count: 0 }
    }

    handleIncrement = () => { this.setState(prevState => {
        return { count: prevState.count - 1 };
      })
    }

    handleDecrement = () => { this.setState(prevState => {
        return { count: prevState.count + 1 };
      })
    }

    render() {

      return (
        <div className="App">

          <button onClick={this.handleIncrement}>Increment</button>
          <button onClick={this.handleDecrement}>Decrement</button>

          <h2>{this.state.count}</h2>
        </div>
      )
    }
  }

  export default Counter

It's important to mention that function components (what we use nowadays) were available in "pre-hooks" React too. But we could only use them for stateless components – meaning components that didn't store state and weren't responsible of any complex logic apart from just rendering UI.

With the incorporation of hooks, we can now use function components (and their more straight-forward and less verbose composition) together with all the more complex functionalities class components offered us.

In short, hooks are things we use to implement logic and functionalities in our components.

Here's another example were we transform what we had in our class component into a functional one:

// javascript
import { useState } from 'react'

export default function Counter() {

    const [count, setCount] = useState(0)

    const handleIncrement = () => setCount(count+1)
    const handleDecrement = () => setCount(count-1)

    return (
        <div className="App">
            <button onClick={() => handleIncrement()}>Increment</button>
            <button onClick={() => handleDecrement()}>Decrement</button>

            <h2>{count}</h2>
        </div>                    
    )
}

Frequently Used React Hooks

Now you have an idea of what hooks are for and why are they better than what was before. So let's take a look at the most used ones, on what occasions are they useful, and how to implement them.

UseState hook

In modern React, we build our applications with functional components. Components are themselves JavaScript functions, independent and reusable bits of code.

The purpose of building the application with components is to have a modular architecture, with a clear separation of concerns. This makes code easier to understand, easier to maintain, and easier to reuse when possible.

The state is an object that holds information about a certain component. Plain JavaScript functions don't have the ability to store information. The code within them executes and "disappears" once the execution is finished.

But thanks to state, React functional components can store information even after execution. When we need a component to store or "remember" something, or to act in a different way depending on the environment, state is what we need to make it work this way.

It's important to mention that not all components in a React app must have state. There are stateless components as well which just render its content without the need to store any information, and that's just fine.

Another important thing to mention is that state change is one of the two things that make a React component re-render (the other is a change in props). In this way, the state stores information about the component and also controls its behavior.

In order to implement state in our components, React provides us with a hook called useState. Let's see how it works with the following example.

// javascript
// App.js
import { useState } from 'react'

function App() {

  const [count, setCount] = useState(0)

  return (
    <div className="App">
      <p>Count is: {count}</p>

      <div>
        <button onClick={() => setCount(count+1)}>Add 1</button>
        <button onClick={() => setCount(count-1)}>Decrease 1</button>

        <button onClick={() => setCount(count+10)}>Add 10</button>
        <button onClick={() => setCount(count-10)}>Decrease 10</button>

        <button onClick={() => setCount(0)}>Reset count</button>
      </div>
    </div>
  )
}

export default App

• First we import the hook from React: import { useState } from 'react'

• Then we initialize the state: const [count, setCount] = useState(0)

Here we provide a variable name for the state (count) and a function name we'll use every time we need to update that state (setCount). Then we set the initial value of the state (0), which will be the value loaded by default every time the app starts.

• Lastly, as mentioned above, every time we want to update the state, we have to use the function we declared: setCount. To use it, we just need to call it passing it the new state we want as a parameter. That is, if we want to add 1 to the previous estate, we call setCount(count+1).

As mentioned as well, this will cause an update of the state and the re-render of the component. Which in our app means we'll see on the screen that the counter is going up.

It's important to mention that the setState function is asynchronous. So if we try to read the state immediately after updating it, like this:

<button onClick={() => {
          setCount(count+1)
          console.log(count)
}}>Add 1</button>

we would get the previous value of the state, without the update.

The correct way of reading state after the update would be using the useEffect hook. It lets us execute a function after every component re-render (by default) or after any particular variable where we declare changes.

Something like this:

useEffect(() => console.log(value), [value])

Also, the fact that useState is asynchronous has implications when considering very frequent and quick state changes.

Take, for example, the case of a user that presses the ADD button many times in a row, or a loop that emits a click event a certain number of times.

By updating state like setCount(count+1) we take the risk that count won't yet be updated when the next event is fired.

For example, let's say at the start count = 0. Then setCount(count+1) is called and the state is asynchronously updated.

But then again setCount(count+1) is called, before the state update was completed. This means that still count = 0, which means that the second setCount won't update the state correctly.

A more defensive approach would be to pass setCount a callback, like so: setCount(prevCount => prevCount+1).

This makes sure that the value to update is the most recent one and keeps us away from the problem mentioned above. Every time we perform updates on a previous state we should use this approach.

If you'd like to take a more in-depth look at ways to manage state in React, you can take a look at this article I wrote a while ago.

UseEffect hook

Together with useState, useEffect will probably be the hook you use the most when developing a React app. It's like the bread and butter for the React dev.

UseEffect allows you to run a side effect on your component. Side effect basically means something that happens after some other specific thing happens.

A typical use case is to fetch data once the component has been mounted. Let's say we have a function called fetchData which is responsible for that – our useEffect hook might look like this:

  useEffect(() => { fetchData() }, [])

The structure of this hook is quite simple. It accepts two arguments. First we have a callback which executes our function and then we have an array called "array of dependencies". If we leave it empty like it is in the example, the callback will execute after the component renders.

Now let's say we want our side effect to run after a variable changes. Following the previous example we used for the useState hook, for our side effect after the count variable changes, we could set useEffect like this:

// javascript
// App.js
import { useState } from 'react'

function App() {

  const [count, setCount] = useState(0)

  useEffect(() => { console.log('Count has changed!') }, [count])

  return (
    <div className="App">
      <p>Count is: {count}</p>

      <div>
        <button onClick={() => setCount(count+1)}>Add 1</button>
        <button onClick={() => setCount(count-1)}>Decrease 1</button>

        <button onClick={() => setCount(count+10)}>Add 10</button>
        <button onClick={() => setCount(count-10)}>Decrease 10</button>

        <button onClick={() => setCount(0)}>Reset count</button>
      </div>
    </div>
  )
}

export default App

A third and last thing to mention about useEffect is the possibility to return a "cleanup" function. This "cleanup" function will execute when the component unmounts. Following our previous example, adding a cleanup function might look like this:

  useEffect(() => {
    fetchData()
    return cleanUp()
  }, [])

Cleanup functions in useEffect are normally used to cancel subscriptions to avoid React trying to update the state of a component that has already been unmounted.

For more info about useEffect's cleanup function, you can refer to this article.

UseContext hook

React context API was released in 2016 with React's 16.3 version. What context does in React is to provide a solution for prop drilling.

Prop drilling refers to the situation in which we have a parent component that stores a state. And beneath that parent, we have many levels of children components.

If we need to render that state in a child component that is deeply nested in that structure, the solution would be to pass the state as props all along the component chain.

A graphic of prop drilling

This option works just fine. The problem is we would need to repeat the same code in many different places, which if we ever need to change our code later on (you'll always have to do this sooner or later) is something very tedious to work with and prone to errors and bugs.

The context API solves this situation by providing "a place" to store state that needs to be consumed from many different parts of our application, and along different levels of the component tree.

The way this works is that the context component will store the given state, and from any given component we can read and update that state, no matter where that component is located. We forget all about props. Instead, we can just work directly with the context and all the components that read that context state will re-render when the state is updated.

A graphic of the same situation but using context

Now that we have the theoretical foundation, let's see how the useContext hook allows us to use this API. The typical implementation would look something like this. Within a "context" folder we'll have two files. Context.js and ContextProvider.js.

Within Context.js we'll just initialize the context API by using the createContext function, which takes as an argument the initial state we want to provide (we don't want anything in this case so we can just pass null).

/// Context.js 
import { createContext } from 'react'

const Context = createContext(null)

export default Context

On `ContextProvider.js` we'll import the context we initialized in the previous file. We'll also initialize the states we want to consume later on and update from our app's components. Finally, we return the context provider and with the `value` object we pass all the states and setState functions we want to consume later on.

The contextProvider is a HOC. A **higher order component or HOC** is similar to a higher order function in JavaScript (I have an article about that [here](https://gercocca.hashnode.dev/higher-order-functions-and-callbacks)). 

Higher order functions are functions that take other functions as arguments OR return other functions. React HOCs take a component as a prop, and manipulate it to some end without actually changing the component itself. You can think of this like wrapper components.

/// ContextProvider.js import { useState } from 'react' import Context from './Context'

const ContextProvider = ({children}) => {

const [darkModeOn, setDarkModeOn] = useState(true) const [englishLanguage, setEnglishLanguage] = useState(true)

return ( <Context.Provider value={{ darkModeOn, setDarkModeOn, englishLanguage, setEnglishLanguage }} > {children} </Context.Provider> ) }

export default ContextProvider

In our `App.js` file, we'll wrap all the components that we want to be able to interact with the state with our contextProvider. In this case we want the whole application to be able to consume and update the context, so we wrap it all.

/// App.js

import './App.scss' import { Suspense, lazy } from 'react' import { BrowserRouter as Router, Routes, Route } from 'react-router-dom' import ContextProvider from './context/ContextProvider' import ErrorBoundary from './ErrorBoundary'

const Header = lazy(() => import ('./components/header/Header')) const AboutPage = lazy(() => import ('./components/aboutPage/AboutPage')) const ProjectsPage = lazy(() => import('./components/projectsPage/ProjectsPage')) const ShortrProject = lazy(() => import('./components/projectsPage/shortrProject/ShortrProject')) const MixrProject = lazy(() => import('./components/projectsPage/mixrProject/MixrProject')) const HelprProject = lazy(() => import('./components/projectsPage/helprProject/HelprProject')) const MyWebsiteProject = lazy(() => import('./components/projectsPage/myWebsiteProject/MyWebsiteProject')) const CurriculumPage = lazy(() => import('./components/curriculumPage/CurriculumPage')) const BlogPage = lazy(() => import('./components/blogPage/BlogPage')) const ContactPage = lazy(() => import('./components/contactPage/ContactPage'))

export default function App() { return (

<Suspense fallback={<></>}>

<Route path='/' element={<Suspense fallback={<></>}>}/>

<Route path='/projects' element={<Suspense fallback={<></>}>}/>

<Route path='/projects/helpr' element={<Suspense fallback={<></>}>}/>

<Route path='/projects/myWebsite' element={<Suspense fallback={<></>}>}/>

<Route path='/projects/mixr' element={<Suspense fallback={<></>}>}/>

<Route path='/projects/shortr' element={<Suspense fallback={<></>}>}/>

<Route path='/curriculum' element={<Suspense fallback={<></>}>}/>

<Route path='/blog' element={<Suspense fallback={<></>}>}/>

<Route path='/contact' element={<Suspense fallback={<></>}>}/>

) }

Finally, from the component we want to read/update context state, we import the context and the useContext hook and destructure the states and functions in the following way (and just use the regular state and setState functions).

import { useContext, useState } from 'react' import Context from '../../context/Context'

import { Link, NavLink } from 'react-router-dom'

const Header = () => {

const { darkModeOn, setDarkModeOn, englishLanguage, setEnglishLanguage } = useContext(Context)

const [showMobileMenu, setShowMobileMenu] = useState(false)

const openMobileMenu = () => { document.body.classList.add('mobileMenu-open') setShowMobileMenu(true) }

const hideMobileMenu = () => { document.body.classList.remove('mobileMenu-open') setShowMobileMenu(false) }

return ( <header className={darkModeOn ? 'header header-dark' : 'header header-light'}>

Germán Cocca

G

• {englishLanguage ? 'About' : 'Sobre mi'}

• {englishLanguage ? 'Projects' : 'Proyectos'}

• Blog

• Curriculum

• {englishLanguage ? 'Contact' : 'Contacto'}

<button data-testid='es-language-btn' className={englishLanguage ? '' : 'selected'} onClick={() => setEnglishLanguage(false)}>ES <button data-testid='en-language-btn' className={englishLanguage ? 'selected' : ''} onClick={() => setEnglishLanguage(true)}>EN

<input type='checkbox' data-testid='dark-mode-toggle' id='dark-mode-toggle' aria-checked='true' className='toggle-checkbox' checked={darkModeOn} onClick={() => setDarkModeOn(!darkModeOn)} />

<div className="hamburguer-icon" onClick={() => showMobileMenu ? hideMobileMenu() : openMobileMenu()}> <div className={!showMobileMenu ? 'line' : 'line top'}> <div className={!showMobileMenu ? 'line' : 'line center'}> <div className={!showMobileMenu ? 'line' : 'line bottom'}>

<nav id='mobile-menu' className={showMobileMenu ? 'mobile-menu-active' : 'mobile-menu'}>

• <NavLink to='/' onClick={() => hideMobileMenu()}>{englishLanguage ? 'About' : 'Sobre mi'}

• <NavLink to='/projects' onClick={() => hideMobileMenu()}>{englishLanguage ? 'Projects' : 'Proyectos'}

• <NavLink to='/blog' onClick={() => hideMobileMenu()}>Blog

• <NavLink to='/curriculum' onClick={() => hideMobileMenu()}>Curriculum

• <NavLink to='/contact' onClick={() => hideMobileMenu()}>{englishLanguage ? 'Contact' : 'Contacto'}

• <button className={englishLanguage ? '' : 'selected'} onClick={() => { setEnglishLanguage(false) hideMobileMenu() }}>ES <button className={englishLanguage ? 'selected' : ''} onClick={() => { setEnglishLanguage(true) hideMobileMenu() }}>EN

) }

export default Header

This is a tiny bit more boilerplate than just passing everything through props, but it's a lot more maintainable, simple, and easy to understand once it's set up.

Another interesting thing to mention is that we can have many different contexts in our application. We can separate them into concerns. For example, say we have one for authentication states, another regarding user preferences and configuration, another for payments or whatever... And then we can wrap those contexts only around the specific components that need to use them. 

So if we have a lot of information that needs to be shared around our app, having many different contexts would be a more modular and tidy way to approach this.

## UseReducer hook

UseReducer is a hook that allows us to natively implement reducers in our app to manage complex states. If you're familiar with [Redux](https://redux.js.org/) or similar state management libraries, the word "reducer" probably rings a bell.

Basically, reducers are a kind of function that take in two or more arguments, perform some kind of action with them, and return a single result that follows from the two arguments. 

A **reducer** is a pure function that takes the previous state and an action as an argument, and returns the next state. It's called a reducer because it's the same function type you could pass to an array: `Array.prototype.reduce(reducer, initialValue)`.

But before we dive in to reducers, why do we need this if we already have the useState hook to manage our state? 

Well, a problem that may come up when you're using useState is the case where new state to be set depends on the previous state or when state changes occur very frequently in our application. 

In these occasions, useState may provoke some unexpected and unpredictable behavior. So this is where **reducers** come in to solve this problem.

**useReducer** is the hook Reacts provides that lets us implement reducers to manage our state. Here's an implementation example:

```js
// App.js
import { useReducer } from 'react'
import './App.scss'

function App() {

  function reducer(state, action) {
    switch (action.type) {
      case 'ADD': return { count: state.count + 1 }
      case 'SUB': return { count: state.count - 1 }
      case 'ADD10': return { count: state.count + 10 }
      case 'SUB10': return { count: state.count - 10 }
      case 'RESET': return { count: 0 }
      default: return state
    }
  }

  const [state, dispatch] = useReducer(reducer, { count: 0 })  

  return (
    <div className="App">
      <p>Count is: {state.count}</p>

      <div>
        <button onClick={() => dispatch({type: 'ADD'})}>Add 1</button>

        <button onClick={() => dispatch({type: 'SUB'})}>Decrease 1</button>

        <button onClick={() => dispatch({type: 'ADD10'})}>Add 10</button>
        <button onClick={() => dispatch({type: 'SUB10'})}>Decrease 10</button>

        <button onClick={() => dispatch({type: 'RESET'})}>Reset count</button>
      </div>
    </div>
  )
}

export default App

• We start by importing the hook from React: import { useReducer } from 'react'

• Then we'll declare a reducer function, which as parameters will take the current state and an action to perform on it. Within it, it will have a switch statement that will read the action type, execute the corresponding action on the state, and return the updated state.

It's common practice to use switch statements on reducers and capital letters to declare the actions.

function reducer(state, action) {
    switch (action.type) {
      case 'ADD': return { count: state.count + 1 }
      case 'SUB': return { count: state.count - 1 }
      case 'ADD10': return { count: state.count + 10 }
      case 'SUB10': return { count: state.count - 10 }
      case 'RESET': return { count: 0 }
      default: return state
    }
  }

• Afterwards, it's time to declare our useReducer hook, which looks fairly similar to the useState hook. We declare a value for our state ('state' in our case), a function we'll use to modify it ('dispatch'), and then useReducer will take the reducer function as first parameter and the default state as second parameter.

const [state, dispatch] = useReducer(reducer, { count: 0 })

• Lastly, to update our state we won't call the reducer directly, but instead we'll call the function we just created ('dispatch'), passing it the corresponding action type we want to execute. Behind the scenes, the dispatch function will connect with the reducer and actually modify the state.

<button onClick={() => dispatch({type: 'ADD'})}>Add 1</button>

It's quite a bit more boilerplate than using useState, but useReducer isn't that complex after all.

To sum it up, we just need:

• A reducer, that is the function that will consolidate all possible state changes

• A dispatch function, that will send the modifying actions to the reducer.

The thing here is that the UI elements won't be able to update the state directly like they did before when calling setState with a value. Now they will have to call an action type and go through the reducer, which makes state management more modular and predictable.

Also, again if you're familiar with Redux and other state management libraries, you probably noticed that with the Context API and the useReducer hook we can easily implement the same features Redux provides, but natively in React now. So personally, I think for most use cases you don't need a state management library in modern React code.

The story was different before, though, and that's probably why so many state management libraries got popular and many devs are still into them nowadays.

UseRef hook

The useRef hook is a function that returns a mutable ref object whose .current property is initialized with the passed argument (initialValue). The returned object will persist for the full lifetime of the component.

There are two main uses of useRef: Keeping track of a mutable variable through re-renders, and accessing the DOM nodes or React elements.

We can declare a ref using the useRef hook the following way: const ref = useRef(initialValue). Then reference.current accesses the reference value, and reference.current = newValue updates the reference value. Pretty simple.

There are 2 things to remember about refs:

1. The value of the reference is persisted between component re-renderings.

2. Updating a reference doesn’t trigger a component re-rendering.

To see an example of this, let's imagine a case where we need to count the number of clicks on a button without re-rendering a component. We could do that like this:

import { useRef } from 'react';

function LogButtonClicks() {
    const countRef = useRef(0);

    const handle = () => {
        countRef.current++;
        console.log(`Clicked ${countRef.current} times`);
    };

    console.log('I rendered!');

    return <button onClick={handle}>Click me</button>;
}

By updating and logging the ref, we avoid the component re-render and achieve our goal. So, the 2 main differences between references and state are:

1. Updating a reference doesn’t trigger re-rendering, while updating the state makes the component re-render.

2. And also... The reference update is synchronous (the updated reference value is available right away), while the state update is asynchronous (the state variable is updated after re-rendering).

Some Less Common but Still Useful Hooks

Here I'll present two hooks that are used for memoization in React. If you're not familiar with memoization, you can refer to this article I wrote a while ago about it.

Basically memoization means making components "remember" props and state, so they re-render only if props/state have changed and avoided unnecessary re-renders. This improves the app's performance.

UseCallback hook

useCallback memoizes callback functions received as props, so they're not recreated on every re-render. Using useCallback correctly can improve the performance of our app.

The way we can implement it is by wrapping the function we're passing as props to a childr component within the useCallback hook, like this:

import { useCallback } from 'react'
import Child from "./child"

export default function Counter() {

    return (
        <div className="App">
             <Child name={ useCallback(() => {console.log('Really Skinny Jack')}, [])  } />
        </div>                    
    )
}

What useCallback does is to hold on to the value of the function despite the parent component re-rendering. This means that the child prop will remain the same as long as the function value remains the same as well. And that solves the problem of unnecessary child re-rendering.

To use it, we just need to wrap the useCallback hook around the function we're declaring. useCallback also has a dependency array, like useEffect. In the array present in the hook, we can declare variables that would trigger the change of the function value when the variable changes too (exactly the same way useEffect works).

const testingTheTest = useCallback(() => { 
    console.log("Tested");
  }, [a, b, c]);

UseMemo hook

useMemo is a hook very similar to useCallback. But instead of caching a function, useMemo will cache the return value of a function.

In this example, useMemo will cache the number 2.

const num = 1
const answer = useMemo(() => num + 1, [num])

While useCallback will cache () => num + 1.

const num = 1
const answer = useMemo(() => num + 1, [num])

Custom React Hooks

If you think about it, hooks are just functions that allow us to implement commonly used logic in our components.

Following this same train of thought, in React apps it's common practice to extract frequently used functionalities into functions and export the with a name starting with the prefix use. This is what we call a custom hook.

Let's see an example of a custom hook that returns us the current window size when we call it.

// Hook
const useWindowSize = () => {
  // Initialize state with undefined width/height
  const [windowSize, setWindowSize] = useState({
    width: undefined,
    height: undefined,
  });

// Handler to call on window resize
  const handleResize = () => {
    // Set window width/height to state
    setWindowSize({
        width: window.innerWidth,
        height: window.innerHeight,
      });
  }

  useEffect(() => {
    // Add event listener
    window.addEventListener("resize", handleResize);
    // Call handler right away so state gets updated with initial window size
    handleResize();
    // Remove event listener on cleanup
    return () => window.removeEventListener("resize", handleResize);
  }, []); // Empty array ensures that effect is only run on mount

  return windowSize;
}

export default useWindowSize;

After, we can call and use our custom hook in any component in the following way:

// Usage
function App() {
  const size = useWindowSize();
  return (
    <div>
      {size.width}px / {size.height}px
    </div>
  );
}

As you can see in the example, custom hooks can also use React's native hooks within them. But think about them as just functions that execute certain commonly used logic needed in various parts of our app, It's nothing more complex than that, really.

If you'd like to know more about custom hooks, here's a website dedicated exclusively to that topic.

Round Up

Well everyone, in this article we've taken a look at hooks, a core topic in current React apps. As always, I hope you enjoyed the article and learned something new.

If you want, you can also follow me on LinkedIn or Twitter. See you in the next one!

We all want to build powerful applications and avoid unnecessary renders. There are some hooks available to help with this, but you might not be sure about which one to use and when.

In this article you will learn the differences between useCallback and useMemo as well as how to measure the gain of the improvements you're getting in the codebase.

Before we begin, you should note that the following methods for optimising React are really last resort options. Before you apply these utilities, your own code will offer you more opportunities for improvement than most of the performance gain you'll get by using what you will learn here.

Still, it's important to know these tools and know when to use them if you see the opportunity.

Resources You'll Need to Follow Along

• Official Beta Documentation for useCallback and useMemo
• Example Project Source Code
• Example Project Live Demo

As always, I've provided a sample project so that you can test in a simplified environment everything that is explained here. No big deal, the example project is just a summary of the main points you will learn now.

Before we start comparing these two hooks, let's review some necessary background concepts.

What is Referential Equality?

When React compares the values used in a dependency array such as useEffect, useCallback, or props passed to a child component, it uses Object.is().

You can find the detailed explanation of Object.is here but in short:

• Primitive values are equal (check the link above for the few exceptions).
• Non-primitive values refer to the same object in memory.

In a simplified example:

"string" === "string" // true
0 === 0 // true
true === true // true
{} === {} // false
[] === [] // false

const f = () => 'Hi'
const f1 = f
const f2 = f

f1 === f1 // true
f1 === f2 // false

How React.memo Works

Now I'll briefly explain how React.memo works (but we'll also discuss it later in the article). When appropriate, you can use it to improve performance.

When you want to avoid unnecessary re-renders on a child component (even if the parent component changes), you can wrap the whole component with React.memo – as long as the props do not change. Also, note referential equality here – the child component will not be re-rendered.

import { memo } from 'react';

const ChildComponent = (props) => {
  // ...
}

export default memo(ChildComponent)

Now that you know how React.memo works, let's start.

How the useCallback Hook Works

useCallback is one of the built-in hooks we can use to optimise our code. But as you'll see it's not really a hook for direct performance reasons.

In short, useCallback will allow you to save the function definition between component renders.

import { useCallback } from "react"

const params = useCallback(() => {
        // ...
    return breed
  }, [breed])

The usage is pretty straightforward:

• Import useCallback from React because it is a built-in hook.
• Wrap a function for which you want to save the definition.
• As in useEffect, pass in an array of dependencies that will tell React when this stored value (the function definition in this case) needs to be refreshed.

One of the first things to note is precisely the function definition part. It stores the definition, not the execution itself, not the result – so the function will be executed every time it is called. Because of this, don't use this hook to avoid lengthy calculations.

So what is the advantage of storing a function definition?

Back to Referential Equality

If the function itself is used, not the returned value, such as:

• Dependency on useEffect or any other hook.
• Prop of a child component, context, and so on.

To achieve true equality between renders, useCallback will store the function definition with the same reference to the object in memory.

Without this hook, in each render the function will be recreated and point to a different in-memory reference. So React will understand that it is different even if you use React.memo in your child component.

You can test this behaviour in the example project. You'll see that, with the non-optimised version, every time you write the side effect of a child component is triggered.

In that demo, you only get a fetch and a fake slowdown. But imagine this same problem in a large project that runs expensive computations on the client or spends a lot on the server.

How the useMemo Hook Works

This is the second built-in hook you will see today. In this case you can consider this hook as a direct optimisation because it stores the result of a function and prevents it from being executed again until the dependencies change.

As it can store the result of a function and also prevent execution between renders of a component, you can use this hook in two situations.

Referential Equality

As you saw with useCallback we can achieve referential equality with this hook as well – but this time for the result itself.

If a function returns something that is going to be treated differently in each render, most commonly objects and arrays, you can use useMemo to get true equality.

import { useMemo } from "react"

const params = useMemo(() => {
    // ...
    return { breed }
  }, [breed])

In the example above you can see the use of useMemo:

• Import useMemo from React because it is a built-in hook.
• Wrap a function for which you want to save the result.
• As in useEffect, it passes an array of dependencies that will tell React when this stored value (the value returned by the function) needs to be refreshed.

In this case, the function returns an object. As you know, comparing objects with Object.is are not the same because they are stored in different memory addresses. With useMemo you can save the same reference.

In the example project you can test this behaviour as in the previous section, same results too. With the non-optimised version, each keystroke will retrieve the images. With useMemo, the equality is maintained and the child component does not retrieve the image again.

Expensive Calculation

Because you are storing a value and avoiding executing the function at all with useMemo, you can use this to avoid executing unnecessary expensive calculations and make your site more performant.

Let's see this with the example project:

There is a component which, given a number n, prints out the nth Fibonacci number. But this recursive version of the algorithm performs rather poorly.

You will also find a constant change over time to force renders. The performance gauge will change state (adding and removing blocks 60 times per second). Because this state is changing all the time, the function that calculates the fibonacci number is constantly running over and over again, even if the given number is always the same.

With this, you will see how the performance degrades visibly when you use higher values with the non-optimised version. The optimised version will only suffer performance spikes when you change the numbers in the slider (when the number changes) but the rest of the renders will skip the calculation and directly serve the result.

The problem here is that in our day to day work we will not encounter calculations called "expensive calculation" and the decision of when to use useMemo won't necessarily be always or never.

When to Optimise

So far you have seen some indicators of when to use the different hooks to avoid unnecessary rendering and/or side effects. But let's define some general rules for deciding when to use them in those not-so-clear cases:

• Review your code first and rethink how you've structured things. You'll find the biggest opportunities to improve performance in your code itself. You can find more information in this post by Dan Abramov.
• If you don't have proof that an optimisation is giving you beneficial results, don't optimise – it's not free.
• If you don't want to do the extra work involved in proving that an optimisation is giving you beneficial results, let's be honest: you don't want to optimise either.

How to Measure Performance Impact/Gain

The most important rule for optimisation (that always comes after reviewing your own code first) is to be able to measure whether the changes are taking effect and what the % gain is. And you don't do this only so you can throw that % in your next performance review.

For this we are going to look at two options on how to proceed when you suspect there is a performance problem or simply want to check the main areas of improvement.

Clunky version

I'll add this option because let's face it: you keep debugging your code with console.log all over the place, don't you? Don't worry, we are in the same boat.

A fast and furious approach to trying to measure performance problems is to find out how long it takes to execute a certain action and how many times that action is performed. So one way to do this is:

const t0 = performance.now()
expensiveCalculation(targetNumber)
const t1 = performance.now()
console.log(`Call to expensiveCalculation took ${t1 - t0} milliseconds.`)
console.count('Expensive Calculation')

But this information alone will detect very few and obvious cases where you already suspected something was wrong.

Also be careful with StrictMode which will trick your console.count by repeating some renders for stability reasons.

Let's now check out the right way to do it.

Pro version

In this version you will use the official React Developer Tools to inspect the performance of certain parts of your code. Once you've installed this browser extension, open the browser's developer tools and search for Profiler.

I will give examples with the sample project, but you can do it with your own project and check the results.

If you press the record button and start performing the actions that you think might need some performance tuning, the profiler will save and print a detailed explanation of what has happened there.

For example, in the expensive calculation example project we are going to compare side by side the non-optimised version versus the useMemo version:

I pressed the record button, waited a few seconds and pressed record again to get these results, with both versions. As you can see, as this is a prepared extreme case, the huge improvement between the two is evident.

But let's take a closer look at what appears in the profiler:

• The grey rows are components that have not been re-rendered so it is nothing to worry about in terms of performance.
• The green and yellow rows are components that have been re-rendered and you can see how long it took to render.
• If you click on each block, you can see a detailed explanation with more data.

I will do a full in-depth article on the profiler, but for now here are some quick tips:

• Under the settings icon, General, check Highlight updates when components render.. This will show what exactly is being rendered and can detect child components that are not meant to render under certain actions.
• Under the settings icon, Profiler, check Record why each component rendered while profiling.. This will add a brief explanation of what a component is rendering and that may give you clues as to where you need to place an upgrade.

Conclusion

As you have seen, these two common misunderstood hooks have very different functions and scenarios on where to use them for real benefit. Now is the time to review some of your current/past projects and spot the cases where you were using this incorrectly or others that may need it.

Optimisation in React is something that in the future can be done automatically by the library. But, at the time of writing this article, it is a process that you should do with care and after thorough analysis.

I hope you found this tutorial useful and it will help you to build better performing applications with React. Thanks for reading!

There are various ways you can toggle an element. In this article, we will take a look at how we can implement toggle functionalities in five (5) different ways in React.

Table of Contents

• How to Install and Setup the React Project

• How to Toggle an Element Using Logical Operators

• How to Toggle an Element Using the useToggle Hook

• How to Toggle an Element Using the Ternary Operator

• How to Toggle an Element Using the If/Else Statement

• How to Toggle an Element Using CSS Conditional Styling

• Conclusion

You can also watch the video version of this article below, or on my YouTube channel:

How to Install and Setup the React Project

To create a React project, you need to have access to NPM (Node Package Manager). Access to NPM requires that you have Node.js installed. You can install Node by heading to the official Node.js website and downloading Node.js.

Node.js official documentation

I advise selecting the "Recommended For Most Users" version. Once the installation is complete, you can open your terminal and run the commands node -v and npm -v. This gives you details on the version of Node and npm you have.

Terminal showing node and npm versions

Still in your terminal, you can now install Create React App which is a platform that allows you to create a React project using the command below:

npm i create-react-app

The next step is to create a new React project from the terminal by running the command:

npm init react-app toggle
cd toggle 
code .

Above, we created a new project called toggle. Then we navigated into the newly created project directory and opened the project in our code editor. We can now begin the process of implementing the different methods of toggling an element.

How to Toggle an Element Using Logical Operators

To make sure the design of our page looks structured, we are going to set up Bootstrap 5 inside of the React project.

To do this, head to the Bootstrap 5 website and copy the CSS CDN link tag. Then go to your index.html file in your React project which can be found in the public directory. Paste the CDN link in the head section, you can see in the code below:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <meta name="theme-color" content="#000000" />
  <meta name="description" content="Web site created using create-react-app" />
  <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
  <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
  <!-- Bootstrap 5 CDN Link -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
  <title>React App</title>
</head>

<body>
  <noscript>You need to enable JavaScript to run this app.</noscript>
  <div id="root"></div>
</body>

</html>

Next, create a new folder called components inside of the src directory. Then create a new file called LogicalNot.js inside the components folder. To implement the logical not operator method, we'll implement the code below:

import React, { useState } from 'react'

const LogicalNot = () => {

  //Using Inline Function and the The Logical Not (!) to toggle state
  const [toggle, setToggle] = useState(true)

  return (
    <>
      <button 
            onClick={() => setToggle(!toggle)} 
            class="btn btn-primary mb-5">
          Toggle State
      </button>
      {toggle && (
        <ul class="list-group">
          <li class="list-group-item">An item</li>
          <li class="list-group-item">A second item</li>
          <li class="list-group-item">A third item</li>
          <li class="list-group-item">A fourth item</li>
          <li class="list-group-item">And a fifth one</li>
        </ul>
      )}
    </>
  )
}
export default LogicalNot

Inside of the LogicalNot.js file, we start off by:

• Importing the useState hook.

• Then we create two variables called toggle and setToggle, while setting the initial state to true.

• Next, inside of the jsx section, we create a button that has an onClick event handler. Within this onClick handler, we create an anonymous function by using the setter we declared earlier called setToggle. We then set the argument in the anonymous function to !toggle which creates a false effect when it's clicked.

• Finally, we toggle the element in the ul tag by wrapping it around the toggle variable and then rendering it conditionally on the page using the logical && Operator.

To display the LogicalNot.js file on the browser, head to the App.js file and import the file there as seen below:

import './App.css';
import LogicalNot from './components/LogicalNot';

function App() {
  return (
    <div className="App mt-5">
      <LogicalNot />
    </div>
  );
}

export default App;

With that, you should have the result below:

Logical not operator sample

How to Toggle an Element Using the useToggle Hook

You'll start this step by creating a new file called ToggleHook.js inside the components folder. Inside this file, import the useState hook.

import React, { useState } from 'react'

Next, create a variable called useToggle which will hold the logic for the useToggle hook as you can se below:

  //Using useToggle Hook

  const useToggle = (initialState) => {
    const [toggleValue, setToggleValue] = useState(initialState);

    const toggler = () => { setToggleValue(!toggleValue) };
    return [toggleValue, toggler]
  };

• Above, we created a callback function and then gave it a parameter called initialState.

• Next, we used the useState hook to create a getter and a setter called toggleValue and setToggleValue, respectively. The useState hook takes the initialState parameter we created earlier which sets the initial value as false by default.

• Finally we then created a variable called toggler. This variable holds an anonymous function that contains our useState variables and then sets the results to the opposite value when clicked. We then returned both the toggleValue and toggler variables in an array.

With this we can now use the useToggle hook to create a getter and a setter variable as you can see below:

  const [toggle, setToggle] = useToggle();

We can now implement the logic of the useToggle hook in the jsx part of our code:

    return (
    <div>
      <button 
            onClick={setToggle} 
            class="btn btn-secondary mb-5">
          Toggle State
      </button>

      {toggle && (
        <ul class="list-group">
          <li class="list-group-item">An item</li>
          <li class="list-group-item">A second item</li>
          <li class="list-group-item">A third item</li>
          <li class="list-group-item">A fourth item</li>
          <li class="list-group-item">And a fifth one</li>
        </ul>
      )}

    </div>
  )

• Above, we created a button that contains an onClick event handler using the setToggle setter previously declared above.

• Then we rendered the elements based on the boolean condition of the toggle variable when it gets clicked.

With that, we should have the result below:

useToggle sample

How to Toggle an Element Using the Ternary Operator

The ternary operator is a JavaScript operator that takes in three different operations, which are:

• A condition

• A question mark (?) to execute a condition if true

• A colon (:) to execute a condition if false

To implement this method, you'll start by importing the useState hook:

import React, { useState } from 'react'

Then you need to create two variables using the useState hook and setting the default value to true:

  const [toggle, setToggle] = useState(true);

Next, create a variable called handleClick that holds a callback function. Within this function, call the setToggle setter and then pass in !toggle to return an opposite value when clicked, as you can see below:

  const handleClick = () => {
    setToggle(!toggle);
  };

Finally, you can now render the logic of the variables you created in your jsx:

  return (
    <div>
      <button 
      onClick={handleClick} 
      class="btn btn-info mb-5">
      Toggle State
      </button>

      {toggle ?
        <ul class="list-group">
          <li class="list-group-item">An item</li>
          <li class="list-group-item">A second item</li>
          <li class="list-group-item">A third item</li>
          <li class="list-group-item">A fourth item</li>
          <li class="list-group-item">And a fifth one</li>
        </ul>
        :
        <></>
      }
    </div>
  )

• Above we created a button that uses an onClick event handler to reference the handleClick variable we created earlier.

• Then we can render the elements by using the toogle variable condition, as well as the question mark (?) which displays elements if the toggle variable is set to true, or displays an empty jsx fragment by using the colon (:) if the toggle variable is set to false.

With that, we should have the result below:

Ternary operator sample

How to Toggle an Element Using the If/Else Statement

The If/Else statement is a conditional statement used to perform different actions based on certain parameters. The if statement executes a certain condition if it is true, and the else statement executes when the condition is false.

To see the if/else statement in action, let's begin by importing the useState hook:

import React, { useState } from 'react'

Next, create the getter and setter variables and then set the default value to true:

 const [toggle, setToggle] = useState(true);

Next, create a variable called handleClick that holds the callback function. Within this function, call the setToggle setter and then pass in !toggle to return an opposite value when clicked, as you can see below:

  const handleClick = () => {
    setToggle(!toggle)
  };

You can now display the elements by using the toggle getter in the jsx as you can see below:

if (toggle) {
    return (
      <div>
        <button onClick={handleClick} class="btn btn-dark mb-5">Toggle State</button>
        <ul class="list-group">
          <li class="list-group-item">An item</li>
          <li class="list-group-item">A second item</li>
          <li class="list-group-item">A third item</li>
          <li class="list-group-item">A fourth item</li>
          <li class="list-group-item">And a fifth one</li>
        </ul>
      </div>
    )
  } else {
    return <button onClick={handleClick} class="btn btn-dark mb-5">Toggle State</button>
  }

• In the jsx, we wrapped the entire element around the if/else statement.

• Within the if statement, we rendered the elements that contain the list items on the page when the toggle is set as true.

• In the else block, however, when the toggle is set to false, only the button element gets returned.

With that, we get the result below:

If/else statement sample

How to Toggle an Element Using CSS Conditional Styling

Conditional styling is one of the ways you can use to manipulate DOM elements in React based on a specific condition. As we've done previously, let's start by importing the useState hook in React:

import React, { useState } from 'react'

Next, set up your useState hook creating the required variables:

  const [toggle, setToggle] = useState(true);

Then create the function that helps set the value of your opposite state when clicked:

  const handleClick = () => {
    setToggle(!toggle);
  };

With this you can now configure the conditional styling in the jsx section of your code:

 return (
    <div>
      <button onClick={handleClick} class="btn btn-warning mb-5">Toggle State</button>

      <ul class="list-group" style={{ display: toggle ? 'block' : 'none' }}>
        <li class="list-group-item">An item</li>
        <li class="list-group-item">A second item</li>
        <li class="list-group-item">A third item</li>
        <li class="list-group-item">A fourth item</li>
        <li class="list-group-item">And a fifth one</li>
      </ul>

    </div>
  )

• Above, we started by creating the button that contains the onClick event handler called handleClick as created earlier.

• Then we used the style attribute in the ul tag to conditionally set the display to block when the toggle variable is true. If the toggle variable is false, we set the display to none. This is possible through the ternary operator.

The result looks like this:

Conditional styling sample

Conclusion

In this tutorial, you learned the various ways you can toggle elements in a React application. If you want access to the code base, you can clone the repo here on GitHub.

Also, if you enjoyed this article, you can kindly show your support by subscribing to my YouTube channel where I create awesome tutorials on web development technologies like Angular, React, JavaScript, Html, CSS, and many more concepts.

Hey everyone 🌈 I haven't written about handling state in React for a long time. The last time was in this article, four years ago, and it seems like it helped a lot of you.

I received tons of views and amazing feedback, so thanks a lot – you really rock! 🎸

Well, a lot of time has passed since then. Hooks landed in React since version v16.8 (in 2019) and there's a lot to keep up with when using state in React.

Are you learning about state and want to become a pro with the useState hook?

Cool, you've came to the right place! Grab a coffee (or tea), fasten your seatbelts, and let's go!

By the way – if you're looking for how to use setState (in class components), then I recommend that you check out my former article "How to become a pro with React setState() in 10 minutes".

What is a React Hook?

A hook is a special function that lets you "hook into" various React features. Imagine a function that returns an array with two values:

• The first value: a variable with the state.
• The second value: a variable with an handler (a function to change the current state).

That's it, easy-peasy. 🥞

Remember that in JavaScript "values are functions, and functions are values". I learned this back in 2017 with MPJ, one of my favourite developers and YouTubers. Thanks for everything MPJ!

In case this confused you a bit, here's an example:

values are functions, and functions are values

Let's see what's happening here:

• In a, you store a number. I mean, you assign the value 1 (which is a number) to a variable called a.
• In b, you store the result (value) of evaluating an expression.
• In c you store a function. You store a non-executed function, which is stored as a value, and ready to be executed anytime.
• In d we assign the result of evaluating c.

Makes sense? Do you get the gist? Yeah, functions are values, and values are functions! That's all you need to know about it for now.

useState, in particular, lets you add React state to functional components (components that are declared as a function, and not as a class).

In truth, state is kept inside the hook, but is accessible from the component where you "call" the hook.

The Rules of React Hooks

Besides the fact that Hooks are JavaScript functions, there are some rules to follow while using them:

Only Call Hooks at the Top Level

Don't call hooks inside loops, conditions, or nested functions. Always use hooks at the top level of your React function (component), before any early returns.

The reason behind this is that hooks must be called in the same order each time a component renders. This is what allows React to correctly preserve the state of hooks between multiple useState and useEffect calls.

Only Call Hooks from React Functions

This means you can call hooks from React functions (components) or from custom hooks, but not from regular JavaScript functions.

There's this useful plugin here that enforces the rules of hooks. It's a very helpful one so make sure you try it out.

The Anatomy of the useState Hook

To use the useState hook, you need to know a few things.

💡You can check the figure below to better understand what I'll explain here.

1. You must import it from the React library.
2. You must invoke it inside a React component

const [state, setState] = useState(initialValue)

Not sure if you get the destructuring, so for those who didn't catch it at first glance:

I could do something like this:

const array = useState(initialValue)

And then I could use the state, inside position 0, as array[0], and the handler to setState, inside position 1, as array[1].

It happens to be much more declarative to destructure the array, as we know its first and second position values, and we know they correspond to the state value and to a handler to change it.

const [first, second] = useState(initialValue)

Yeah, we could to this. But we can call anything to first and second. The only rule is that these variables correspond to the first and second positions of the array returned by the useState function (hook).

const [state, setState] = useState(initialValue)
const [counter, setCounter] = useState(initialCount)
const [something, setSomething] = useState(initialSomething)

If you're not familiar with the destructuring assignment syntax, feel free to pause reading and take a sneak peak into MDN or read this helpful tutorial.

Go ahead – I'll wait! (Edo sips a bit of ☕)

3. You can then freely render state, or call setState to update your state value.

And here's the simplest fully functional example you can have:

The Anatomy of the useState hook

When to Use the useState Hook

To understand when to use this hook, we need to start by learning when we need state.

At first glance, we think that when we need a variable that changes over time, we need to keep it in state. But this is not true, most of the time. I mean, if your variable can be derived from other data, then you don't need state.

State Example 1:

A theme color, that can be light or dark, according to the hour, can be derived from system data.

We can simply get the time (date) from the JS Date function. So we don't need state here, right? This is a const you can declare with an expression or function that must be evaluated.

State Example 2:

A modal toggle (to show/hide a modal).

Modal toggle can be true or false, and it's triggered when the user clicks a button. So, in this case we really need state, because we can't derive this kind of information – it only depends on "when and if" the user triggers the event or not.

Be mindful of this difference – between what can be derived and what depends on the user.

You'll want to use the useState hook when you need to store input from a user.

💡As a rule of thumb, you should only use state to keep this kind of information – that requires the user to input data, or trigger events.

Another very used example is form data. Almost every app or website needs to collect info from the user. And to do that it's pretty usual (or mandatory) to have a form.

Form data must be stored in state, at least until it's persisted to a database. But it can also be retrieved from a database, and made editable again.

Cool, let's continue.

How to Use Multiple State Variables in React

So, if we need to handle multiple states, the best and recommended first approach is to handle them separately, like this:

Dogs and Cats Counter (Handling Multiple State Variables)

There's nothing wrong with doing this, in spite of the fact that it seems to be primitive. It's a good and linear approach as we keep working with JavaScript primitives (in this case numbers).

You can also mix state in one object:

This case becomes a bit more complex. We've initialized an object, instead of a primitive value. When we call setPets, we must be aware that we need to spread the existing pets object, and then add the change, otherwise we'll lose it.

With the old setState API this wasn't mandatory – it would understand that you wanted to update a key of the state object. But nowadays it doesn't, and I like it. Now it's more declarative and more of a fundamental concept in JavaScript.

If by any chance you're not familiar with the spread syntax, feel free to check it out here or read this helpful tutorial.

State Asynchrony

Beware that changing / mutating state is an asynchronous operation.

Let's see an evidence:

State is asynchronous (it's batched and updated with a delay)

So, I've updated our initial dogs example a bit. This time I've created a handleDogsCount function to show it to you.

Inside the handleDogsCount I call setDogs with the new value.

What happens if I need to use the state value immediately for another operation?

Right, the state wasn't updated yet. The best way to approach an immediate operation is to use the value passed to the handleDogsCount function, and – forgetting the dogs state value for now – knowing before hand (this is tricky, but it is what it is) that the value wasn't updated on time.

How to Mutate State in a Functional Way

Okay, now we know that state doesn't change immediately. And there's another question related to it. What would happen if you could click the More button 1M times per second?

Possibly, at the end of the 1M clicks, the counter would be 999_998 (or less), and not 1_000_000 as expected.

To avoid this happening, we can set state in a functional way. We'd grab the value of the previous state, so that React can properly batch all the requests and update state linearly. This way we wouldn't lose information in the middle.

To do that you could simply do the following:

Mutating state in a functional way

Okay, cool. Now we're sure React won't miss a thing while handling our 1M requests to mutate state.

Instead of grabbing the dogs variable to add or subtract one, we rely on the previousState that is exposed inside the useState setState handler (in this case the setDogs function).

Beware that objects and arrays are compared by reference, so complex state should be tamed properly in the dependency arrays of other hooks, such as, useEffect. We'll talk about it later, in another article!

If you're new to JavaScript, let me give you a spoiler about what I'm talking about:

Comparison by ref

As you see, c is not strictly equal to d. Yes, go ahead and try it! It happens that JavaScript compares complex objects (all that aren't primitive) by reference, not by value.

If I stringify it, it means I'm comparing strings. And because they're primitive, they're strictly equal (compared by value).

How to Initialize State as a Function

If you need to initialize state with an expensive computation, then it's better to initialize it with a function, and not a value.

const [ dogs, setDogs] = useState(() => expensiveComputation())

This means we're lazily initializing the variable. The initial value will be assigned only on the initial render (again, if it's a function).

In subsequent renders (due to change of state in the component or a parent component), the argument of the useState hook will be ignored and the current value will be retrieved.

Conclusion

So, it seems we've reached the end of this journey.

You've learned what a hook is, the rules of hooks, how useState works, its anatomy, and how can you handle multiple states.

You've also learned some pitfalls (such as handling state objects, or that state is asynchronous), and some tricks to improve performance, such as initializing state as a function to avoid being constantly evaluating that computation.

Hope you have enjoyed this article about the useState hook, or simply the "state hook".

Last But Not Least

I'm Edo. I'm a freeCodeCamp advocate who enjoys helping people change careers into Software Engineering.

If you're changing careers, or thinking about doing a career change, it might inspire you to read a bit of my story, which was published here on the freeCodeCamp publication.

You might also be interested in "How to Become a Junior Software Engineer in 6 months".

If you enjoyed this article, please follow me on Twitter and just reach out so that we can chat!

Thanks everyone 🌈, you rock!

Edo

For more about React Hooks...

1. React Documentation