当多个状态导致多次重新渲染时，直接在React函数组件中执行代码

Question

I have component that uses both useState() and other custom hooks multiple times.

I want to act based on these state values. I could do that directly in the function component's body:

const MyComponent = () => {
  const [someState, setSomeState] = useState(false);
  const [otherState, setOtherState] = useState(false);
  const customHookValue = useCustomHook();

  if (someState) foo();
  const foo = () => setOtherState(!otherState);

  if (customHookValue > 10) bar();
  const bar = () => setSomeState(somestate > customHookValue);
}

However, every time someState changes (and a re-render happens) the second conditional also runs, causing bar() to run if the conditional passes. This feels unnatural. Logically, bar() should only run when customHookValue changes, as someState only changes if customHookValue has changed since last render.

In summary, a re-render caused by a change to someState should not cause a bunch of unrelated state setting functions to run again. Even though re-running them causes no change in the outcome of the program, it is not logically right. They only need to re-run when their corresponding conditional changes. It could effect performance.

This must be a common challenge in React. I am quite new to it, so I do not know what the approach to solve this would be.

Questions

1. How would I solve the above in the recommended manner?
2. Would I have to wrap every conditional in a useEffect or a useMemo ?

---

EDIT:

Updated the second conditional, to make my question clearer (it should depend on customHook).

---

CLARIFICATION:

As it might not have been clear, my issue is as follows. When state changes, a re-render occurs. This causes all functions in the component's body to re-run. Now, if we have many useState in a component, and only one changes, a bunch of potentially unrelated state-changing and potentially expensive functions I have defined in the components body will run. These state-changing functions would only have to run if the state values they are trying to set has changed. If the values they are setting has not changed, it is unnecessary for them to run again. But, the re-render reruns all functions in the component's body regardless.

Answer 1

It looks like (as others have suggested) you want useEffect :

useEffect(() => {
  if (someState) {
    setOtherState(!otherState)
  }
}, [someState, otherState])
useEffect(() => {
  if (customHookValue > 10) {
    setSomeState(someState > customHookValue)
  }
}, [customHookValue])

Since you only want the setSomeState to run if customHookValue changes, make it the only item in the dependencies array passed to useEffect .

The exhaustive-deps eslint-plugin-react-hooks will complain about the second useEffect, since the function depends on the value of someState , even though someState will only potentially change if customHookValue changes. I also wouldn't worry about things potentially affecting performance until they do. I don't know a ton about the internals of React, but it does some things under the hood to avoid re-renders it doesn't need to do, and can do multiple renders before an actual update is painted.