0

Today we can use getDerivedStateFromProps for class components and state updates during render phase for React Hooks/function components to create derived state, if needed.

I am especially curious about the React Hook variant: Will this be allowed in React Concurrent Mode?

If I wrap the ScrollView component from the FAQ with StrictMode <React.StrictMode>...</React.StrictMode>, there will be no warnings. However, I still have a slight feeling in stomach, this pattern could be problematic with concurrent mode.

So question is:

Is derived state still possible in React Concurrent Mode with regard to the Hooks FAQ link?

Example:

function Comp( {someCond} ) {
  const [counter, setCounter] = useState(0);

  if (someCond) {
    // we are setting derived state directly in render (see FAQ).
    setCounter(prev => prev + 1);
    // <-- imagine, at this point React aborts this render (and restarts later)
    // Does it lead to inconsistencies?
  }

  // ... return some jsx
}
bela53
  • 3,040
  • 12
  • 27
  • Hi, why should it be problematic? Could you express better what causes your slight feeling, please? – NoriSte May 04 '20 at 11:07
  • In concurrent mode, a render can potentially be aborted and restarted. I am curious, if that causes problems, if state is changed directly in the render phase as in this case. Let's assume, a render is restarted *after* we have set state. Is that a valid case/ supported by React or does it cause inconsistencies? – bela53 May 06 '20 at 18:11
  • I think that the function call phase and the render phase are different (even if we generically call them "render") and so no inconsistencies happen – NoriSte May 06 '20 at 20:33
  • @NoriSte thanks, to clarify: By "function call phase" you mean calling the setter of `useState`? I also added code, so everyone can speak about the same example. – bela53 May 08 '20 at 15:54
  • Thanks! I mean the "component function call", `Comp` in your example – NoriSte May 08 '20 at 16:09
  • You can read more about the topic [in this amazing article](https://blog.isquaredsoftware.com/2020/05/blogged-answers-a-mostly-complete-guide-to-react-rendering-behavior/). In my comments I erroneously referred to the render phase (I called it the "function call phase") and the commit phase (calling it the "render phase") – NoriSte May 17 '20 at 10:38

1 Answers1

0

It's safe, but you can only update the state of this component until you have no side-effect on other components during render. in react 16.13.0 a warning added about this.

react 16.13.0 release note:

Warnings for some updates during render A React component should not

cause side effects in other components during rendering.

It is supported to call setState during render, but only for the same component. If you call setState during a render on a different component, you will now see a warning:

Warning: Cannot update a component from inside the function body of a different component.
seyed
  • 1,555
  • 1
  • 17
  • 24
  • While I understand the words of the release note, I remain uncertain about the implications when writing an app implementing `useState` for component state (and lifting state), and `redux`. I keep getting this warning when I try to dispatch an update to my store intended to trigger side effects. I'll have to extract some code into a pen I guess, but I sure would like to have some better characterization of how I should be structuring my code to prevent this warning if anyone can help with that? For example, how would I know if another component is rendering? – tim.rohrer Nov 19 '20 at 05:03