子组件可以从父组件接收旧数据进行操作吗？

Question

. Answers to this question are eligible for a +50 reputation bounty. Aleksandr Šmailov is looking for an .

Let's define a Tags component (a fancy checkbox group).

const Tags = ({ tags, selectedIds, onSelectionChange }) => {
  const createClickHandler = (id) => () => {
    const newSelectedIds = xor(selectedIds, [id]);
    const selectedTags = newSelectedIds.map((id) =>
      tags.find((tag) => tag.id === id)
    );
    onSelectionChange(selectedTags);
  };

  const isSelected = (id) => selectedIds.includes(id);

  return (
    <div>
      {tags.map(({ id, text }) => (
        <button
          key={id}
          type="button"
          style={{ backgroundColor: isSelected(id) ? "gray" : "white" }}
          onClick={createClickHandler(id)}
        >
          {text}
        </button>
      ))}
    </div>
  );
};

This allows us to consume it like this:

export default function App() {
  const tags = someUsers.map((user) => ({
    id: user.id,
    text: user.name,
    value: user
  }));
  const [selectedTags, setSelectedTags] = useState([]);
  const selectedIds = selectedTags.map((tag) => tag.id);

  return (
    <div>
      <Tags
        tags={tags}
        selectedIds={selectedIds}
        onSelectionChange={setSelectedTags}
      />
    </div>
  );
}

You can test this in https://codesandbox.io/s/musing-goldwasser-nmm13

I believe this is a decent design of a component and its props (the main focus is on the ease of consuming for the other components). We could perhaps remove selectedIds and add a selected flag in the tags prop, however this is beyond the question scope.

---

My colleague on the other hand insists that this can lead to bugs and should be avoided .

The reasoning is as follows: if we want to update the state we must use appropriate API - setState(oldState => //data manipulation to produce new state) from useState ( https://reactjs.org/docs/hooks-reference.html#functional-updates ) Since the parent passes the state directly to the children we can't be sure that the child component filters data based on the latest data. Basically, this issue: https://reactjs.org/docs/faq-state.html#why-is-setstate-giving-me-the-wrong-value

His implementation would be something along these lines:

const Tags = ({ tags, selectedIds, onTagClick }) => {
  const isSelected = (id) => selectedIds.includes(id);

  return (
    <div>
      {tags.map(({ id, text }) => (
        <button
          key={id}
          type="button"
          style={{ backgroundColor: isSelected(id) ? "gray" : "white" }}
          onClick={() => onTagClick(id)}
        >
          {text}
        </button>
      ))}
    </div>
  );
};

In this case, we lift the whole filtering to a parent component

const handleTagClick = (id) =>
  setSelectedTagsIds((oldIds) => {
    if (oldIds.includes(id)) return oldIds.filter((oldId) => oldId !== id);

    return [...oldIds, id];
  });

You can test this in: https://codesandbox.io/s/kind-cdn-j7cg3

---

or another version:

const Tags = ({ tags, selectedIds, setSelectedIds }) => {
  const isSelected = (id) => selectedIds.includes(id);

  const handleTagClick = (id) =>
    setSelectedIds((oldIds) => {
      if (oldIds.includes(id)) return oldIds.filter((oldId) => oldId !== id);

      return [...oldIds, id];
    });

  return (
    <div>
      {tags.map(({ id, text }) => (
        <button
          key={id}
          type="button"
          style={{ backgroundColor: isSelected(id) ? "gray" : "white" }}
          onClick={() => handleTagClick(id)}
        >
          {text}
        </button>
      ))}
    </div>
  );
};

in this case, we leave the filtering to the Tags component however we pass the function which allows modification of state based on old state.

You can test this code in https://codesandbox.io/s/relaxed-leftpad-y13wo

---

In my opinion, this case is a completely different scenario that React docs never specifically address.

As far as I understand React rendering engine will always ensure that the child nodes get the newest props so a situation where a child component filters (or does other manipulation) with stale data is simply impossible. I would like to quote some docs for this however I haven't found any information on this specific situation.

All I know is:

• with my many years of React experience I have yet to encounter any bugs with my approach
• other 3rd party libraries use the same design

Can someone (with deep React knowledge) provide more insight why I am correct or wrong in this instance?

Answer 1

For you to notice the difference, you could simulate a delay in the update of the selection. ie, the user of your component needs to do some async stuff when selecting a tag

  const [selectedTags, setSelectedTags] = useState([]);
  const selectedIds = selectedTags.map((tag) => tag.id);
  const asyncSelection = (tags) => {
    setTimeout(() => setSelectedTags(tags), 1000);
  };
  ...
      <Tags
        tags={tags}
        selectedIds={selectedIds}
        onSelectionChange={asyncSelection}
      />

You can try here clicking each option one by one, and when all updates run, not all options will be selected (which is not expected). Since the component didn't render immediately, the handler was not updated and the second click is executed with an old state, therefore, the sequences of the selections are not correctly synced. Of course, this is a contrived example, but it could be the case in a very heavy UI, that 2 clicks happen without the Tags component being rerendered.

On the other hand, letting the user have more control over the state, it would be possible to handle this kind of situation. Once again, if you try here clicking each option one by one, in the end all will be selected as expected

  const handleTagClick = (id) => {
    setTimeout(() => {
      setSelectedTagsIds((oldIds) => {
        if (oldIds.includes(id)) return oldIds.filter((oldId) => oldId !== id);

        return [...oldIds, id];
      });
    }, 1000);
  };

Answer 2

As far as I can see the things you're talking about are two different issues.

1. If the props of a child are updated it will trigger a rerender of that component. There are edge cases where that gets tricky like with useRef or some callbacks but that's besides the point. The filtering and things you're doing will never be different or affected in any way as long as it's dependent on the props changing and if the component receives new props it will rerender the child and reapply the filters without any issues.
2. The second issue is sort of different from the first one. What could happen is that the tag state is repeatedly updated and only one of those states are passed to the child, that's what you want to avoid. Essentially you have to make sure the parent state has actually updated correctly before passing it to a child. The child will always update and filter and do everything correctly exactly on what's passed to it, your problem here is making sure you're actually passing the correct props.

There's no need to move anything to the parent component, the child will update itself correctly when the parent tag state updates and passes that new state to the child, the only thing you have to look out for here is that you don't update the parent state multiple times and cause https://reactjs.org/docs/faq-state.html#why-is-setstate-giving-me-the-wrong-value and end up passing the wrong props to the child. For example if someone spams the group checkbox on and off quickly. Even then if you pass the wrong props to the child the child will still update itself and reapply the filtering and everything, just on the wrong props.

React will do its batch state update on something like a 10ms interval (I'm not exactly sure how long it is). So if someone clicks the checkbox and it updates the tag state at 6/10ms it will rerender the component 4ms later when it does the batch state update. If hypothetically during those 4ms you click it off again, or if straight after it updated you click it off again, it's where weird things start happening. This is why if you use the increment counter (like in that example) multiple times it won't actually increase it by 3, only by 1, since the code will execute all 3 times on 0 before it did the state update 10ms later. That being said even if you spam that checkbox on and off all the time (spamming the tag array state), I don't see any way how it would go out of sync, every 10ms it will update and rerender the child and the moment you stop spamming it the child will finally rerender on the last current parent state and be correct. I don't see how you could really have an issue with that in your example. It could cause an issue with something like a counter but not with your tags because of the fact that a counter is a cumulative addition on previous values whereas your tags is a static set of values (that is the key difference).