Updating an immutable variable in a child component

Question

I have a global variable plyViewed in App.js that is set outside of my App component.

let plyViewed = 0;

function App() {

It monitors which move the board game is on. Below the board are some navigation buttons. If you click < I do plyViewed--, if you click I do plyViewed++. You get the picture.

This all worked fine, until I refactored!

I took the navigation buttons, who’s JSX code was all inside the App() function and put it in <MoveButtons /> in MoveButtons.js. So, I thought I could pass down plyViewed as a prop and then update the value in my code in the MoveButton child component. Then I find that props are immutable! Now I am stuck.

My code below gives an example of how I am using that plyViewed code. When someone clicks the navigation buttons, it fires an event that triggers the code to update plyViewed, although now it doesn’t work anymore because it is a prop. The rest of the game data is stored in an object called gameDetails.

I am passing down the plyViewed like this:

<MoveButtons
  plyViewed={plyViewed}
  // etc.
/>

A shortened version of my MoveList component is below.

plyViewed is used in multiple areas throughout my app, like gameDetails. I’ve considered putting it in the gameDetails object, but then I still have the issue of gameDetails being immutable if passed down as a prop. Then if I set plyViewed as a state variable, it becomes asynchronous and therefore unsuitable for use in calculations.

Am I thinking about this all wrong?

export default function MoveButtons(props) {
  return (
    <Grid item xs={6}>
      <Button
        variant="contained"
        color="primary"
        size="large"
        style={{ maxWidth: props.buttonWidth, minWidth: props.buttonWidth }}
        onClick={() => {
          if (props.plyViewed > 0) {
            props.plyViewed--;
            props.board.current.setPosition(props.fenHistory[props.plyViewed]);
            props.setFen(props.fenHistory[props.plyViewed]);
            props.setSelectedIndex(props.plyViewed);
          }
        }}
      >
        <NavigateBeforeIcon />
      </Button>
      <Button
        variant="contained"
        color="primary"
        size="large"
        style={{ maxWidth: props.buttonWidth, minWidth: props.buttonWidth }}
        onClick={() => {
          if (props.plyViewed < props.fenHistory.length - 1) {
            props.plyViewed++;
            props.board.current.setPosition(props.fenHistory[props.plyViewed]);
            props.setFen(props.fenHistory[props.plyViewed]);
            props.setSelectedIndex(props.plyViewed);
          }
        }}
      >
        <NavigateNextIcon />
      </Button>
    </Grid>
  );
}

Answer 1

you are trying to update the props that are passed down from the higher-level component in your component tree, which is not possible.

You have the option to create a state using React's useState hook and passing down both the value and the dispatcher, but this is not recommended because you would be drilling props down the tree.

You can also pass the onClick events (or parts of them), up to your App component, which is an improvement to the first method but not the best practice in your case.

What you should really be doing is managing your global state using either, React's own Context API, or Redux. I think this could help you out.

Answer 2

While we're missing the full picture, it sounds like plyViewed should be a state and the asynchronous behaviour shouldn't prevent any computation if done properly with React.

It's easy to overlook the fact that the new state value is synchronously computed by ourselves when setting the state. We can just use that same local value to compute anything else and the async behaviour isn't affecting us at all.

    onClick={() => {
      if (props.plyViewed > 0) {

        // New local value computed by ourselves synchronously.
        const updatedPlyViewed = props.plyViewed - 1;

        // Set the state with the new value to reflect changes on the app.
        props.setPlyViewed(updatedPlyViewed);

        // Use the up-to-date local value to compute anything else
        props.board.current.setPosition(props.fenHistory[updatedPlyViewed]);
        props.setFen(props.fenHistory[updatedPlyViewed]);
        props.setSelectedIndex(updatedPlyViewed);
      }
    }}

This is a really simple pattern that should help solve the most basic issues with new state values.

Simple computations

Quick computations can be done in the render phase. The latest state values will always be available at this point. It's unnecessary to sync multiple state values if it can easily be computed from a single value, like the plyViewed here.

const [plyViewed, setPlyViewed] = useState(0);

// No special state or function needed to get the position value.
const position = fenHistory[plyViewed];

Here's an interactive example of how a simple state can be used to compute a lot of different derived information within the render phase.

// Get a hook function
const { useState } = React;

// This component only cares about displaying buttons, the actual logic
// is kept outside, in a parent component.
const MoveButtons = ({ onBack, onNext }) => (
  <div>
    <button type="button" onClick={onBack}>
      Back
    </button>
    <button type="button" onClick={onNext}>
      Next
    </button>
  </div>
);

const App = () => {
  const [fenHistory, setFenHistory] = useState(["a", "b"]);
  const [plyViewed, setPlyViewed] = useState(0);

  const position = fenHistory[plyViewed];

  const onBack = () => setPlyViewed((curr) => Math.max(curr - 1, 0));
  const onNext = () =>
    setPlyViewed((curr) => Math.min(curr + 1, fenHistory.length - 1));

  return (
    <div>
      <p>Ply viewed: {plyViewed}</p>
      <p>Fen position: {position}</p>
      <p>Fen history: {fenHistory.join(", ")}</p>
      <button
        type="button"
        onClick={() =>
          setFenHistory((history) => [...history, `new-${history.length}`])
        }
      >
        Add to fen history
      </button>

      <MoveButtons onBack={onBack} onNext={onNext} />
    </div>
  );
};

// Render it
ReactDOM.render(<App />, document.getElementById("app"));

button {
  margin-right: 5px;
}

<div id="app"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>

Expensive computations

If the computation takes a considerable amount of time to complete, and that doing it each render cycle is noticeably slowing down the rendering, there are some optimizations we could do.

useMemo will only recompute the memoized value when one of the dependencies has changed. This optimization helps to avoid expensive calculations on every render.

const [plyViewed, setPlyViewed] = useState(0);

const position = useMemo(() => /* costly computation here */, [plyViewed]);

Complex computations

If the computation has a lot of dependencies, we could use useReducer to manage a state object.

Note that the following example isn't justifying the use of useReducer and it's only used as an example of the implementation.

const initialState = {
  plyViewed: 0,
  fenHistory: ["a", "b"],
  positionValue: "a",
};

function reducer(state, action) {
  const { plyViewed, fenHistory } = state;
  switch (action.type) {
    case "back":
      if (fenHistory.length <= 0) return state;
      const newIndex = plyViewed - 1;
      return {
        ...state,
        plyViewed: newIndex,
        positionValue: fenHistory[newIndex],
      };
    case "next":
      if (fenHistory.length - 1 > plyViewed) return state;
      const newIndex = plyViewed + 1;
      return {
        ...state,
        plyViewed: newIndex,
        positionValue: fenHistory[newIndex],
      };
    case "add":
      return {
        ...state,
        fenHistory: [...fenHistory, action.value],
      };
    default:
      throw new Error();
  }
}

const App = () => {
  const [{ plyViewed, fenHistory, positionValue }, dispatch] = useReducer(
    reducer,
    initialState
  );

  const onBack = () => dispatch({ type: "back" });
  const onNext = () => dispatch({ type: "next" });
  const onAdd = () => dispatch({ type: "add", value: 'anything' });
  // ...

Async computations

If we need to get the result, for example, from a distant server, then we could use useEffect which will run once when the value changes.

const App = () => {
  const [plyViewed, setPlyViewed] = useState(0);
  const [position, setPosition] = useState(null);

  useEffect(() => {
    fetchPosition(plyViewed).then((newPosition) => setPosition(newPosition));
  }, [plyViewed]);

There are a couple pitfalls with useEffect and asynchronously setting the state.

• Prevent setting state on an unmounted component.
• plyViewed may have changed again since the first fetch was triggered but before it actually succeeded, resulting in a race-condition

Answer 3

Then if I set plyViewed as a state variable, it becomes asynchronous and therefore unsuitable for use in calculations.

I think this is incorrect, you just need to start using useEffect as well:

function App() {
    const [plyViewed, setPlyViewed] = useState(0);
    <MoveButtons
        plyViewed={plyViewed}
        setPlyViewed={setPlyViewed}
    />
}

export default function MoveButtons(props) {
    useEffect(() => {
        props.board.current.setPosition(props.fenHistory[props.plyViewed]);
        props.setFen(props.fenHistory[props.plyViewed]);
        props.setSelectedIndex(props.plyViewed);
    }, [props.plyViewed, props.fenHistory]);
    return (
    <Grid item xs={6}>
      <Button
        variant="contained"
        color="primary"
        size="large"
        style={{ maxWidth: props.buttonWidth, minWidth: props.buttonWidth }}
        onClick={() => {
          if (props.plyViewed > 0) {
            props.plyViewed--;
          }
        }}
      >
        <NavigateBeforeIcon />
      </Button>
      <Button
        variant="contained"
        color="primary"
        size="large"
        style={{ maxWidth: props.buttonWidth, minWidth: props.buttonWidth }}
        onClick={() => {
        if (props.plyViewed < props.fenHistory.length - 1) {
          props.plyViewed++;
        }}
      >
        <NavigateNextIcon />
      </Button>
    </Grid>
  );