React Hooks FAQ: implementation of getderivedstatefromprops leads to rendering with incoherent state

Question

IMHO The suggestion from React Hooks FAQ #getDerivedStateFromProps leads to one first rendering with a value of row that doesn't correspond to the value of isScrollingDown . As the call to setIsScrollingDown only schedules a new rendering and doesn't affect the current rendering, the latter will be executed with the new value of row and the old value isScrollingDown.

This behaviour is not equivalent to the static getderivedstatefromprops method of the component class that allows coherence between row and isScrollingDown.

Should not the example be updated with something like the following code in order to guarantee a coherent rendering ? Or did I miss something ?

Thank you !

function ScrollView({row}) {
    let [isScrollingDown, setIsScrollingDown] = useState(false);
    let [prevRow, setPrevRow] = useState(null);

    if (row !== prevRow) {
        // Row changed since last render. Update isScrollingDown.
        isScrollingDown = prevRow !== null && row > prevRow
        setIsScrollingDown(isScrollingDown);
        setPrevRow(row);
    }

    return `Scrolling down: ${isScrollingDown}`;
}

score 0 · Accepted Answer · answered Mar 08 '19 at 17:58

Here's the important part from the documentation that makes your change unnecessary:

React will re-run the component with updated state immediately after exiting the first render so it wouldn’t be expensive.

The render where they are out of sync will never be committed to the browser. In fact, if it was returning a child component from the render, the rendering of the children would not execute until after the state has been updated (the children returned from the render that updated the state would be ignored).

Below is an example with console logs added to show this. Notice that when you increment the row, ScrollView renders twice but ScrollingDown only renders once receiving only the last version of ScrollView's state.

import React, { useState } from "react";
import ReactDOM from "react-dom";

function ScrollingDown({ isScrollingDown, prevRow, row }) {
  console.log("ScrollingDown", isScrollingDown, prevRow, row);
  return (
    <div>
      {`Scrolling down: ${isScrollingDown}`}
      <br />
      {`prevRow: ${prevRow}`}
      <br />
      {`row: ${row}`}
    </div>
  );
}

function ScrollView({ row }) {
  let [isScrollingDown, setIsScrollingDown] = useState(false);
  let [prevRow, setPrevRow] = useState(null);

  if (row !== prevRow) {
    // Row changed since last render. Update isScrollingDown.
    setIsScrollingDown(prevRow !== null && row > prevRow);
    setPrevRow(row);
  }
  console.log("ScrollView", isScrollingDown, prevRow, row);
  return (
    <ScrollingDown
      isScrollingDown={isScrollingDown}
      prevRow={prevRow}
      row={row}
    />
  );
}

function App() {
  const [row, setRow] = useState(1);
  return (
    <div className="App">
      <ScrollView row={row} />
      <button onClick={() => setRow(prev => prev + 1)}>Increment Row</button>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Thank you for detailed explanations ! It makes sense that the incoherent render would not be committed to browser and that it would not have any consequences most of the time. But that means that you render logic must be ready to manage incoherency between props and states without crashing. E.g. a list of resource ids in props that doesn't match a list of http requests from a previous id list in the state could lead to weird situations. This is a worry that didn't exist in class components. Isn't it ? But now, I'm aware. ;-) — bbo, Mar 08 '19 at 18:28
The easy way to deal with that is to just `return null` immediately after updating the state since it doesn't matter what gets returned in that render. It also would make it clearer that nothing from the render is being used in the case where you update state. https://codesandbox.io/s/zxpnvvm24p — Ryan Cogswell, Mar 08 '19 at 18:38
"return null" immediately seems definitely a great solution ! I would recommend to put it by default in the FAQ snippet as a good practice to avoid further discussions and problems. Thank you ! — bbo, Mar 08 '19 at 18:49
After a little bit of thinking, the `return null` solution works only in the render function itself, obviously. This logic cannot be encapsulated in a reusable custom hook. In that case, I think my proposal in the question is still valid. — bbo, Mar 11 '19 at 09:02

React Hooks FAQ: implementation of getderivedstatefromprops leads to rendering with incoherent state

1 Answers1