使用 React useState hook function 调用设置中止 state

Question

With the old class-based this.setState() method, we could return null from a function passed to setState to tell React not to do anything with that specific setState call:

this.setState(({ value }) => {
  if (value === 0) {
    return null;
  } else {
    return { value: value - 1 };
  }
});

I'm trying to understand what's the correct way to do this with React Hooks, is the below correct?

const [x, setValue] = useState(0);
setValue(value => {
  if (value === 0) {
    return value;
  } else {
    return value - 1;
  }
});

I'm trying not to trigger a re-render if I pass the original value.

Answer 1

Looks like a job for useEffect hook:

useEffect(() => {
setValue(value => {
  if (value === 0) {
    return value;
  } else {
    return value - 1;
  }
});
}, [x])

Effect will only run if x changes.

Answer 2

React shouldn't rerender. From react docs ( https://reactjs.org/docs/hooks-state.html ): "If your update function returns the exact same value as the current state, the subsequent rerender will be skipped completely."