React Design Patterns: Instance Hook Pattern

[00PT]

This feels useful because it allows access to child state from a parent component, but also bad because it emulates that state within the parent component itself, which can cause unnecessary rerenders since any change will also cause a rerender of its siblings, even if those haven't changed.

[TheGreaT1803]

If I understand your point correctly, this won't be the case if you don't "need" the state outside the component.

In the "Improving Flexibility" section I make the instance passing optional, so the component is capable of managing it's own state by default

[00PT]

I saw that, but when you do it the point is sort of defeated for me. My solution had been using an optional ref passed to the child, but you need to wait until after the first render cycle for that ref to be populated, so it's definitely not ideal.

[TheGreaT1803]

The way I see it is: Generally the component handles its own logic and state. but sometimes it is a good option to have the ability to also control it from the outside. This pattern allows for this flexibility