React Component API Architecture

Question

I've typically built architecture like this:

In react terms: Main component makes an http API request and sets it's state. It then distributes this state as props to many child components that use the data in different ways. Example below.

Is this a mistake in react? Should every child component make it's own API call and be related to it's own API endpoint - it seems more react like but this would hammer the server with unnecessary requests?

class OptimizationData extends React.Component {
        //set up initial structure to avoid nulls
        constructor() {
            super();
            this.state = {
                data: []    
            };
        }
        componentDidMount() {
            axios.get('url')
            .then(response => this.setState({data: response.data}))
        }
        render() {
            return (
               <ChartWidget options={this.state.data.projects} >
               <SummaryWidget options={this.state.data.projectUsers} >
            )
        }
}

I think it is totally OK. Why do you think the second option is more "react like"? — devserkan
– devserkan, Commented Jul 19, 2018 at 22:48
It seems that way from the guides and the way it is structured for component separation.. Every component could be truly independent and load on it's own promise if they are separate. I'm don't like this approach because passing the states around would be a headache if components have callbacks that mutate the state for the rest of the components. — GavinBelson
– GavinBelson, Commented Jul 19, 2018 at 22:52
But I think the separation is not like the way you define. There are smart or container components and the other ones, dumb or presentational components. Here you are using the right logic. One fetch and pass the data to your dumb components. If the data is different for all your components maybe you can think the second option but if you do the same fetch in every component I think doing it once and distribute the data is a better approach here. Even there are callbacks in the components. — devserkan
– devserkan, Commented Jul 19, 2018 at 23:01

Adam Nathaniel Davis · Accepted Answer · 2018-07-20 01:42:54Z

If I'm understanding your question correctly, the potential "mistake" that you're worried about can be mitigated (or eliminated) with proper choice of architecture. A standalone React app works, by default, in a hierarchical manner (e.g., App call a subcomponent, which calls another subcomponent, which calls...) So you can keep your server from getting "hammered with unnecessary requests" by intelligently choosing which layer of your application should store the data that was retrieved from the API.

Here's a conceptual example based on the way that I'm building my current React app:

<App>
// Very little happens in this layer; I just instantiate React and load 
// up some basic variables that will be needed for the entire app
    <DataLayer>
        // This is the layer where I make the API calls for "app-wide" data.
        // I also do API calls here for data that is OK to be cached. The user
        // will be dynamically loading/unloading Modules as they select 
        // different items in the left nav.  But data retrieved from API calls 
        // made here - in the <DataLayer> component - will be available for 
        // the life of the application, no matter which Modules are selected
        <DisplayLayer>
            // The only API data stored at this level is that which controls 
            // configuration choices for the display (e.g., what language the 
            // user has chosen).  API data stored here is also available for 
            // the life of the application, no matter which Modules are selected
            <ModuleLayer>
                <Users>
                    // The data from API calls made at this layer only "lives" as 
                    // long as the user has selected this particular Module 
                    // (typically, by clicking something in the left-nav).  So 
                    // if the user is viewing the <Users> module, an API call is 
                    // made to the server to retrieve all the current Users.  That
                    // data then "lives" in the application until the user chooses 
                    // to navigate to a different module.  If the user navigates 
                    // somewhere else, and then chooses to come back to this 
                    // module, these API calls will need to be relaunched.
                    // HOWEVER, if I deem it acceptable that the data from this 
                    // module could be cached for a longer period of time, then 
                    // it's perfectly feasible that loading this module COULD 
                    // trigger an API call up in the <DataLayer>.  If that were 
                    // the case, then those results would essentially be cached in 
                    // that higher-level component and the application would not 
                    // need to call these API endpoints again the next time the 
                    // user chooses to navigate back to this module.
                <Roles>
                <Teams>
                <...etc>

Dupocas · Accepted Answer · 2018-07-19 22:58:16Z

1

Both are fine! I prefer to fetch data in a container and then distribute through it's childs via props, in this way you can keep the data-flow more organized (in my experience of course), but both ways are just fine.

answered Jul 19, 2018 at 22:58

Dupocas

21.5k7 gold badges44 silver badges59 bronze badges

Comments

Sylvain · Accepted Answer · 2018-07-19 22:53:56Z

1

No, it's totally fine. Most react components should be dumb components; mostly render functions. Only a few need to be smart. Also see Lifting the state up.

answered Jul 19, 2018 at 22:53

Sylvain

19.3k26 gold badges103 silver badges148 bronze badges

Collectives™ on Stack Overflow

React Component API Architecture

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related