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 useEffects. Each one should be responsible for a single and independent synchronization process.