I'm working on a quick and dirty admin system for SquadWOD and I really don't need to use Redux, that being said I do need to have some kind of global state that I fetch from Firebase. I was fetching this at the top of the main wrapping components that need it, however re-renders were fetching this data from Firebase every time and it's a lot of data wasting a lot of Firebase reads.
So I decided to shift the Firebase reads into a component that doesn't get re-rendered, App.js was an obvious choice but the user isn't logged in at this point and I didn't want to write logic to protect for that. My wrapping layout component is the next obvious choice as it only displays once the user is authenticated but never has to re-render, the only problem is that it's a HOC and so don't "know" what children it's rendering.
Turns out this is pretty simple to solve with React.createElement:
{React.cloneElement(props.children, { wods: wods, exercises: exercises })}Where wods and exercises are the data fetched from Firebase.