JIYIK CN >

Toggle a boolean state in React:

1. Use useStatethe hook to track the state of a boolean value.
2. Pass a function to setStatethe function returned by the hook.
3. Toggle a boolean value depending on its current value, setIsLoading(current => !current)e.g.

import {useState} from 'react';

export default function App() {
  // 👇️ initialize boolean to false
  const [isLoading, setIsLoading] = useState(false);

  const toggleIsLoading = () => {
    // 👇️ passed function to setState
    setIsLoading(current => !current);
  };

  return (
    <div>
      <button onClick={toggleIsLoading}>Toggle loading state</button>
      {isLoading && <h2>Loading...</h2>}
    </div>
  );
}

We setIsLoadingpass a function to , because isLoadingthat function is guaranteed to be called with the current (latest) value of the boolean.

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

We use logical NOT (!)operators to flip Boolean values.

Following are some examples of using the logical NOT operator.

console.log(!true); // 👉️ false console.log(!false); // 👉️ true

注意, we should not try to access a boolean state variable immediately after changing it.

setIsLoadingIf we try to access a state variable immediately after updating it using the function isLoading, there is no guarantee that we will get the current (latest) value.

If we need to listen to state changes, add the state variable to useEffectthe dependencies array of the hook.

import {useEffect, useState} from 'react';

export default function App() {
  const [isLoading, setIsLoading] = useState(false);

  const toggleIsLoading = () => {
    // 👇️ passed function to setState
    setIsLoading(current => !current);
  };

  useEffect(() => {
    // 👇️ 如果我们需要监听 isLoading 布尔值的变化
    console.log('isLoading is: ', isLoading);
  }, [isLoading]);

  return (
    <div>
      <button onClick={toggleIsLoading}>Toggle loading state</button>
      {isLoading && <h2>Loading...</h2>}
    </div>
  );
}

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

注意, which is also called when mounting a component.

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

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>
  );
}

When running the hook on mount useEffect, we use ref to exit early.

Use this method if we want to listen to state changes but need to skip the first render.