React Architecture Redesign

Before we go any further: Redux or Flux is out of the question, not enough time to learn and properly test/implement/document

Here is my top level component. The problem is that I need a way to store state for the children, but they aren't being rendered here hence the need for restructuring.

-- Both of these are in the render/return functions of my top level component

<SideNav {...tab_props} {...this.props} />
{React.cloneElement(this.props.children, { callback: this.callback.bind(this) })}

I am seeking advice on how to best redesign our front-end with the primary goal of minimizing requests, and ultimately cacheing needed data in state somewhere in the app. Thoughts?

1 answer

  • answered 2018-03-14 18:26 vin_Bin87

    So, after much searching and research I stumbled on an awesome blog post that covers exactly what I need and it turns out I don't need to do the major restructuring that I initially thought was necessary.

    Link > Blog Post

    So, what I am going to do is pretty simple. React.cloneElement is going to be used here. I will be mapping through all of the children, which are being rendered based on the URL (using react-router), and passing to them the state as well as some callback functions (not created yet for this use-case)

    Would look something like this, I also tested it and it works!

    render() {
    let childWithState =, (child) => {
          return React.cloneElement(child, {state: this.state, callback: this.setParentState})

    So, now from any of these children elements, I only need to call on this.props.state.--insert-something-- and I have access to is. If it doesn't exist, I can run my fetch request, and then in a callback function set the state in the parent, which would immediately re-render my component and give me access to the parent state!