Preem
Preem

Reputation: 47

What is best practice for handling data in React components?

Currently I have my parent components handling all my Axios calls, and I'll pass that data down with props. Should my child components be handling those requests individually in each child component, what is the best practice?

Upvotes: 1

Views: 1167

Answers (3)

kiraci
kiraci

Reputation: 1

I think, the best practice is to use Redux Toolkit to get states in parent components so that we can pass states to child component by using useContext hook instead of props drilling. With useContext, you can pass state and the function to update state from child components. In addition, I use folder structure like atoms, molecules and organisms. I can reuse these components in other projects without modifying them by staying loyal to this approach.

For fetching the data, child component can check if required data is available. If not, child component can use the function coming from parent for fetching and adding data to Redux. Child components always requires a parent to handle data.

Upvotes: 0

StepUp
StepUp

Reputation: 38094

Should my child components be handling those requests individually in each child component, what is the best practice

There is no such rule which says that parent component should get all necessary data and pass that data down to all child components through props.

We can imagine a situation where we have top panel element which shows:

  • person name
  • weather temperature
  • current date

Yeah, if we make requests from each component, then we will have three API calls. So far so good. But on the next day, client says that he wants to show weather temperature in bottom panel. So we will have weather temperature at the top and bottom panel. It means that we will make 4 API calls. And it is not good solution.

What we can do? So if you are going to need to share the state across a lot of components then we could use state management library or useContext hook (it is simpler and easier to understand than Redux). Both have pros and cons.

If your application is not small, we can use state management libraries such as Redux, MobX, Zustand. However, it is completely okay not to use state management library if your application is not big.

Do You Really Need a React State Management Library?

Upvotes: 1

sm3sher
sm3sher

Reputation: 3350

It depends very much on which and how many components need the data.

Data on which many components depend and do not have to be fetched again and again make the most sense in a parent component.

Data which can be used very limited in a small child component should also be fetched in this component.

The same applies to data that is between these two extremes. A healthy balance prevents components that have nothing to do with the data from being unnecessarily misused as middleman. Furthermore, the parent components render all child components as well. It is therefore all the more important to make sure that the calls happen as selectively as possible.

For data that is needed in each component, I recommend a state manager (React's native reducer and useContext). This prevents prop-drilling, because the data can be easily made available in each component.

Upvotes: 1

Related Questions