The parent is the source of truth for the children nodes. Which means don't send anything down that you don't intend to be stable. As the children will (and should) treat it as gospel. That also means that the root component is god for the whole view.
Most source of bugs happens when people ignore this simple fact. Input start from the root and get transformed along the way. Each node can bring things from external, but it should be treated careful as the children down won't care. It's all props to them.
Which also means don't create new objects out of the blue to pass down. When you need to do so, memoize. As the only reason you need to do so is because you want:
- to join two or more props or local state variables
- or to transform the value of a prop or a local state variable (in an immutable fashion, as it should be).
You're making the same argument as the author. As they said, the only two solutions are:
1. Enforce that you're always memoizing everywhere always
2. Memoize every new function and object (and array) and pray everyone else does too
#1 is pretty miserable, #2 is almost always guaranteed to fail.
The mismatch is that you need stable props from the bottom up, and you enforce stable props from the top down. Any oversight in between (even indirectly, like in a hook or external module) creates a bug that appears silently and regresses performance.
The only solution is to have everyone have discipline and respect the convention of React.
> you need stable props from the bottom up, and you enforce stable props from the top down.
You don't need stable props from the bottom up. Component will always react to props change and will returns a new Tree. The function for that are going to be run multiple times and you're not supposed to control when it does. So the answer is to treat everything that comes from the parent as the gospel truth. And any local transformations should be done outside of function calls.
#1 is not needed. Memoization concerns is always local to the component, as long as you ensure that the props you're sending down is referentially stable, you're golden.
#2 is not needed. Again your only concern is the current component. Whatever everyone does elsewhere is their bad practices. Maybe they will cast your carefully constructed type into any or try/catch your thougthful designed errors into oblivion along the way too. The only thing you can do is correct them in PR reviews or fix the code when you happen upon it.
> You don't need stable props from the bottom up. Component will always react to props change and will returns a new Tree.
This is strictly false, because of effects. The bottom of your tree consumes props and triggers events. The author has plenty of examples of this, and even calls out useEventEffect as being helpful.
> The only solution is to have everyone have discipline and respect the convention of React.
The article specifically goes out of its way to show that mistakes still happen and linters aren't capable of solving this alone.
> as long as you ensure that the props you're sending down is referentially stable, you're golden
This is literally the point. You can't. As the component, you're powerless to ensure this. And components that use your component can't even be sure, because referential stability doesn't only require your code to be correct, but every third party library as well.
Most source of bugs happens when people ignore this simple fact. Input start from the root and get transformed along the way. Each node can bring things from external, but it should be treated careful as the children down won't care. It's all props to them.
Which also means don't create new objects out of the blue to pass down. When you need to do so, memoize. As the only reason you need to do so is because you want:
- to join two or more props or local state variables
- or to transform the value of a prop or a local state variable (in an immutable fashion, as it should be).
- or both.