CODEWITHSUNDEEP
reactjs
GavinBelson
GavinBelson

Reputation: 2784

React Component API Architecture

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} >
            )
        }
}

Upvotes: 1

Views: 1360

Answers (3)

Adam Nathaniel Davis
Adam Nathaniel Davis

Reputation: 425

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>

Upvotes: 2

Dupocas
Dupocas

Reputation: 21297

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.

Upvotes: 1

Sylvain
Sylvain

Reputation: 19249

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.

Upvotes: 1

Related Questions