Using the useState hook to update boolean state in React

avatar

Borislav Hadzhiev

Last updated: Apr 21, 2022

banner

Photo from Unsplash

Using the useState hook to update boolean state in React #

To update the useState hook using boolean state in React:

  1. Pass a function to the setState function the hook returns.
  2. The setState function is guaranteed to be called with the current (most up to date) boolean value.
App.js
import {useEffect, useState} from 'react'; export default function App() { const [isLoading, setIsLoading] = useState(false); const toggleIsLoading = () => { // 👇️ passed function to setState setIsLoading(current => !current); }; useEffect(() => { console.log('isLoading is: ', isLoading); }, [isLoading]); return ( <div> <button onClick={toggleIsLoading}>Toggle loading state</button> {isLoading && <h2>Loading...</h2>} </div> ); }

We passed a function to setIsLoading because the function is guaranteed to be called with the current (most up to date) value for the isLoading boolean.

update boolean state useeffect

In the example, we simply toggle the boolean and return the result to update the state.

Note that you shouldn't try to immediately access the boolean state variable after changing it.

If you try to access the isLoading state variable immediately after using the setIsLoading function to update it, there is no guarantee that you'll get the current value.

If you need to listen to state changes, add the state variables to the dependencies array of the useEffect hook.

We added the isLoading state variable to the hook's dependencies array, so any time isLoading changes, the logic in our useEffect hook will re-run.

Note that the hook is also invoked when the component mounts.

If you don't want to run the logic in your useEffect hook on the initial render, but only when the specific state variable changes, use a ref to return early on the initial render.

App.js
import {useEffect, useState, useRef} from 'react'; export default function App() { const [isLoading, setIsLoading] = useState(false); const toggleIsLoading = () => { setIsLoading(current => !current); }; const isFirstRender = useRef(true); useEffect(() => { if (isFirstRender.current) { isFirstRender.current = false; return; // 👈️ return early if first render } console.log('isLoading is: ', isLoading); }, [isLoading]); return ( <div> <button onClick={toggleIsLoading}>Toggle loading state</button> {isLoading && <h2>Loading...</h2>} </div> ); }

We used a ref to exit early when the useEffect hook is run on mount.

Use this approach if you want to listen for state changes but need to skip the first render.

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.
book cover
You can use the search field on my Home Page to filter through all of my articles.