12 Weeks of React (part 3)
TIL #1
It turns out that if React renders the same component at the same position, the state will be preserved.
In the example above, when isFancy
is changed, the Counter
component will maintain it's state
Because it's the same component at the same position, React sees it as the same Counter.
But, if you do want to render a component at the same position but reset
it's state, you can use the key
attribute.
TIL #2
You can use useImperativeHandle to you customize the ref exposed when using forwardRef.
TIL #3
Using flushSync you can force React to update the DOM synchronously.
useEffect
It's OK to have multiple useEffect
s. Each one should be
responsible for a single and independent synchronization process.