Using the useState hook to update boolean state in React

avatar

Borislav Hadzhiev

Thu Apr 21 20222 min read

banner

Photo by Kazuend

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 ran on mount.

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

Use the search field on my Home Page to filter through my more than 1,000 articles.