storyblok-react
storyblok-react copied to clipboard
Issues with hooks in useStoryblok
There are a few issues with the useStoryblok()
:
-
useEffect()
is called conditionally on line 40, caused by early return statement on line 35. See the rules of hooks -
useSbBridge()
causes side-effects, yet it is not called within `useEffect(). (Despite its name, useSbBridge is not a react hook) -
useStoryblokBridge()
cause side-effects that are not cleaned up. How do we prevent memory leaks? What if the registered events try to mutate the state of a component that has unmounted? - On line 47, we might be mutating the component's state after it has unmounted. This will happen if the component is unmounted after sending the fetch request, and before the
setState()
is called. See https://www.codingdeft.com/posts/react-prevent-state-update-unmounted-component/ - I am not completely sure about this one: In
useStoryblokBridge()
, we are subscribing to events from the bridge. If two different components are callinguseStoryblokBridge()
, then I assume that line 37 will be called twice; one will pass the condition and result in a mutated state, and the other will cause the window to reload. That's a side-effect that is not easy to foresee. Since we are not cleaning up the event listeners (I think), anytime we unmount the story component and replace it with another story component, the window will reload.