React - most efficient way to share data between components
I'll start by saying I'm very new to React and am just playing around with having components interact with each other... trying to get a sense for where state belongs and the most efficient way(s) to render changes on screen.
I have 2 sibling components, Bro and Sis that are direct children of Dad. Bro makes an HTTP request in componentWillMount to get initial values for its state. It then passes one of the pieces of data from the response (uid) back up to Dad (via a method defined in Dad) which is then passed down to Sis via props. Sis then uses this value in making ITS initial HTTP request (in componentDidUpdate) to populate ITS state.
Dad
class Dad extends Component {
state = {
uid: null
}
updateUID = id => {
this.setState({uid: id});
}
}
render() {
return (
<>
<Bro />
<Sis update={this.updateUID} />
</>
);
}
Sis
class Sis extends Component {
state = {
uid: null,
something: null,
another: null
}
componentDidUpdate() {
axios.get('example.com/endpoint2.json')
.then(res => {
/*
transform as needed and put the vales from
res.data into this.state accordingly...
*/
});
}
render () {
return <section>Component: Sis</section>;
}
}
Bro
class Bro extends Component {
state = {
uid: null,
blah: null,
blah-blah: null
}
componentWillUpdate() {
axios.get('example.com/endpoint1.json')
.then(res => {
/*
...
transform as needed and put the vales from
res.data into this.state accordingly...
*/
// pass uid back up to Dad to be passed down to Sis
this.props.update(res.data.uid);
});
}
render () {
return <section>Component: Bro</section>;
}
}
Is this Bro --> Dad --> Sis passing of data the right way to do this? This seems a bit slow and perhaps unnecessarily complicated to me... I think. The alternate ways i can think of doing it are:
- have
Sismake its initial HTTP request incomponentWillMountand fetch the value ofuidon its own. This would eliminate the need to pass it from one child to the parent to the other child, but it would involve a partially redundant query on the backend which is why I chose not to go this route. - have
Dadmake an HTTP request that performs 1 combined query to return the data needed by bothBroandSisand pass it down to each accordingly. As it stands right now,Daddoes not always displayBroandSis(depending on theroute). In those cases, it would be a useless HTTP request and thus definitely not right, but I'm thinking a bit of restructuring may make this viable...
perhaps nestingDadin something likeGrandpaand lettingGrandpatake care of the routing whileDadfetches the data forBroandSis.
So I guess ultimately my question is: should I be passing data between child/adjacent/sibling components via their parent component or should the parent component be the source of the data for both children and pass it down to each accordingly?
reactjs state
asked Jan 19 at 9:17
Daveh0Daveh0
150110
add a comment |
I'll start by saying I'm very new to React and am just playing around with having components interact with each other... trying to get a sense for where state belongs and the most efficient way(s) to render changes on screen.
I have 2 sibling components, Bro and Sis that are direct children of Dad. Bro makes an HTTP request in componentWillMount to get initial values for its state. It then passes one of the pieces of data from the response (uid) back up to Dad (via a method defined in Dad) which is then passed down to Sis via props. Sis then uses this value in making ITS initial HTTP request (in componentDidUpdate) to populate ITS state.
Dad
class Dad extends Component {
state = {
uid: null
}
updateUID = id => {
this.setState({uid: id});
}
}
render() {
return (
<>
<Bro />
<Sis update={this.updateUID} />
</>
);
}
Sis
class Sis extends Component {
state = {
uid: null,
something: null,
another: null
}
componentDidUpdate() {
axios.get('example.com/endpoint2.json')
.then(res => {
/*
transform as needed and put the vales from
res.data into this.state accordingly...
*/
});
}
render () {
return <section>Component: Sis</section>;
}
}
Bro
class Bro extends Component {
state = {
uid: null,
blah: null,
blah-blah: null
}
componentWillUpdate() {
axios.get('example.com/endpoint1.json')
.then(res => {
/*
...
transform as needed and put the vales from
res.data into this.state accordingly...
*/
// pass uid back up to Dad to be passed down to Sis
this.props.update(res.data.uid);
});
}
render () {
return <section>Component: Bro</section>;
}
}
Is this Bro --> Dad --> Sis passing of data the right way to do this? This seems a bit slow and perhaps unnecessarily complicated to me... I think. The alternate ways i can think of doing it are:
- have
Sismake its initial HTTP request incomponentWillMountand fetch the value ofuidon its own. This would eliminate the need to pass it from one child to the parent to the other child, but it would involve a partially redundant query on the backend which is why I chose not to go this route. - have
Dadmake an HTTP request that performs 1 combined query to return the data needed by bothBroandSisand pass it down to each accordingly. As it stands right now,Daddoes not always displayBroandSis(depending on theroute). In those cases, it would be a useless HTTP request and thus definitely not right, but I'm thinking a bit of restructuring may make this viable...
perhaps nestingDadin something likeGrandpaand lettingGrandpatake care of the routing whileDadfetches the data forBroandSis.
So I guess ultimately my question is: should I be passing data between child/adjacent/sibling components via their parent component or should the parent component be the source of the data for both children and pass it down to each accordingly?
reactjs state
asked Jan 19 at 9:17
Daveh0Daveh0
150110
"Correct" is subjective and opinion based. It's definitely not the best option. I see no reason whyDadshouldn't do both requests and just pass props to children. Or, even better, use Redux architecture. Then it won't matter which component starts the request and there will be no need to send state up because everything will be stored in a shared state.
– Sulthan
Jan 19 at 9:21
This shouldn't be downvoted. The question completely makes sense although it's opinion-based.
– Brian Le
Jan 19 at 9:37
I edited he title to sound less opinion-based. In general, is there any advantage to having each component fetch its own data rather than having the parent fetch it for both?
– Daveh0
Jan 19 at 9:47
@Sulthan - I haven't quite gotten to Redux yet. Bu my understanding is that it allows for a global state store accessible by any component at any time. This seems like the exact solution needed. Are there any drawbacks to using it in a scenario such as this?
– Daveh0
Jan 19 at 9:50
add a comment |
I'll start by saying I'm very new to React and am just playing around with having components interact with each other... trying to get a sense for where state belongs and the most efficient way(s) to render changes on screen.
I have 2 sibling components, Bro and Sis that are direct children of Dad. Bro makes an HTTP request in componentWillMount to get initial values for its state. It then passes one of the pieces of data from the response (uid) back up to Dad (via a method defined in Dad) which is then passed down to Sis via props. Sis then uses this value in making ITS initial HTTP request (in componentDidUpdate) to populate ITS state.
Dad
class Dad extends Component {
state = {
uid: null
}
updateUID = id => {
this.setState({uid: id});
}
}
render() {
return (
<>
<Bro />
<Sis update={this.updateUID} />
</>
);
}
Sis
class Sis extends Component {
state = {
uid: null,
something: null,
another: null
}
componentDidUpdate() {
axios.get('example.com/endpoint2.json')
.then(res => {
/*
transform as needed and put the vales from
res.data into this.state accordingly...
*/
});
}
render () {
return <section>Component: Sis</section>;
}
}
Bro
class Bro extends Component {
state = {
uid: null,
blah: null,
blah-blah: null
}
componentWillUpdate() {
axios.get('example.com/endpoint1.json')
.then(res => {
/*
...
transform as needed and put the vales from
res.data into this.state accordingly...
*/
// pass uid back up to Dad to be passed down to Sis
this.props.update(res.data.uid);
});
}
render () {
return <section>Component: Bro</section>;
}
}
Is this Bro --> Dad --> Sis passing of data the right way to do this? This seems a bit slow and perhaps unnecessarily complicated to me... I think. The alternate ways i can think of doing it are:
- have
Sismake its initial HTTP request incomponentWillMountand fetch the value ofuidon its own. This would eliminate the need to pass it from one child to the parent to the other child, but it would involve a partially redundant query on the backend which is why I chose not to go this route. - have
Dadmake an HTTP request that performs 1 combined query to return the data needed by bothBroandSisand pass it down to each accordingly. As it stands right now,Daddoes not always displayBroandSis(depending on theroute). In those cases, it would be a useless HTTP request and thus definitely not right, but I'm thinking a bit of restructuring may make this viable...
perhaps nestingDadin something likeGrandpaand lettingGrandpatake care of the routing whileDadfetches the data forBroandSis.
So I guess ultimately my question is: should I be passing data between child/adjacent/sibling components via their parent component or should the parent component be the source of the data for both children and pass it down to each accordingly?
reactjs state
asked Jan 19 at 9:17
Daveh0Daveh0
150110
I'll start by saying I'm very new to React and am just playing around with having components interact with each other... trying to get a sense for where state belongs and the most efficient way(s) to render changes on screen.
I have 2 sibling components, Bro and Sis that are direct children of Dad. Bro makes an HTTP request in componentWillMount to get initial values for its state. It then passes one of the pieces of data from the response (uid) back up to Dad (via a method defined in Dad) which is then passed down to Sis via props. Sis then uses this value in making ITS initial HTTP request (in componentDidUpdate) to populate ITS state.
Dad
class Dad extends Component {
state = {
uid: null
}
updateUID = id => {
this.setState({uid: id});
}
}
render() {
return (
<>
<Bro />
<Sis update={this.updateUID} />
</>
);
}
Sis
class Sis extends Component {
state = {
uid: null,
something: null,
another: null
}
componentDidUpdate() {
axios.get('example.com/endpoint2.json')
.then(res => {
/*
transform as needed and put the vales from
res.data into this.state accordingly...
*/
});
}
render () {
return <section>Component: Sis</section>;
}
}
Bro
class Bro extends Component {
state = {
uid: null,
blah: null,
blah-blah: null
}
componentWillUpdate() {
axios.get('example.com/endpoint1.json')
.then(res => {
/*
...
transform as needed and put the vales from
res.data into this.state accordingly...
*/
// pass uid back up to Dad to be passed down to Sis
this.props.update(res.data.uid);
});
}
render () {
return <section>Component: Bro</section>;
}
}
Is this Bro --> Dad --> Sis passing of data the right way to do this? This seems a bit slow and perhaps unnecessarily complicated to me... I think. The alternate ways i can think of doing it are:
- have
Sismake its initial HTTP request incomponentWillMountand fetch the value ofuidon its own. This would eliminate the need to pass it from one child to the parent to the other child, but it would involve a partially redundant query on the backend which is why I chose not to go this route. - have
Dadmake an HTTP request that performs 1 combined query to return the data needed by bothBroandSisand pass it down to each accordingly. As it stands right now,Daddoes not always displayBroandSis(depending on theroute). In those cases, it would be a useless HTTP request and thus definitely not right, but I'm thinking a bit of restructuring may make this viable...
perhaps nestingDadin something likeGrandpaand lettingGrandpatake care of the routing whileDadfetches the data forBroandSis.
So I guess ultimately my question is: should I be passing data between child/adjacent/sibling components via their parent component or should the parent component be the source of the data for both children and pass it down to each accordingly?
reactjs state
reactjs state
asked Jan 19 at 9:17
Daveh0Daveh0
150110
asked Jan 19 at 9:17
Daveh0Daveh0
150110
edited Jan 19 at 9:43
Daveh0
asked Jan 19 at 9:17
Daveh0Daveh0
150110
asked Jan 19 at 9:17
Daveh0Daveh0
150110
asked Jan 19 at 9:17
Daveh0Daveh0
150110
150110
"Correct" is subjective and opinion based. It's definitely not the best option. I see no reason whyDadshouldn't do both requests and just pass props to children. Or, even better, use Redux architecture. Then it won't matter which component starts the request and there will be no need to send state up because everything will be stored in a shared state.
– Sulthan
Jan 19 at 9:21
This shouldn't be downvoted. The question completely makes sense although it's opinion-based.
– Brian Le
Jan 19 at 9:37
I edited he title to sound less opinion-based. In general, is there any advantage to having each component fetch its own data rather than having the parent fetch it for both?
– Daveh0
Jan 19 at 9:47
@Sulthan - I haven't quite gotten to Redux yet. Bu my understanding is that it allows for a global state store accessible by any component at any time. This seems like the exact solution needed. Are there any drawbacks to using it in a scenario such as this?
– Daveh0
Jan 19 at 9:50
add a comment |
"Correct" is subjective and opinion based. It's definitely not the best option. I see no reason whyDadshouldn't do both requests and just pass props to children. Or, even better, use Redux architecture. Then it won't matter which component starts the request and there will be no need to send state up because everything will be stored in a shared state.
– Sulthan
Jan 19 at 9:21
This shouldn't be downvoted. The question completely makes sense although it's opinion-based.
– Brian Le
Jan 19 at 9:37
I edited he title to sound less opinion-based. In general, is there any advantage to having each component fetch its own data rather than having the parent fetch it for both?
– Daveh0
Jan 19 at 9:47
@Sulthan - I haven't quite gotten to Redux yet. Bu my understanding is that it allows for a global state store accessible by any component at any time. This seems like the exact solution needed. Are there any drawbacks to using it in a scenario such as this?
– Daveh0
Jan 19 at 9:50
"Correct" is subjective and opinion based. It's definitely not the best option. I see no reason why
Dad shouldn't do both requests and just pass props to children. Or, even better, use Redux architecture. Then it won't matter which component starts the request and there will be no need to send state up because everything will be stored in a shared state.– Sulthan
Jan 19 at 9:21
"Correct" is subjective and opinion based. It's definitely not the best option. I see no reason why
Dad shouldn't do both requests and just pass props to children. Or, even better, use Redux architecture. Then it won't matter which component starts the request and there will be no need to send state up because everything will be stored in a shared state.– Sulthan
Jan 19 at 9:21
This shouldn't be downvoted. The question completely makes sense although it's opinion-based.
– Brian Le
Jan 19 at 9:37
This shouldn't be downvoted. The question completely makes sense although it's opinion-based.
– Brian Le
Jan 19 at 9:37
I edited he title to sound less opinion-based. In general, is there any advantage to having each component fetch its own data rather than having the parent fetch it for both?
– Daveh0
Jan 19 at 9:47
I edited he title to sound less opinion-based. In general, is there any advantage to having each component fetch its own data rather than having the parent fetch it for both?
– Daveh0
Jan 19 at 9:47
@Sulthan - I haven't quite gotten to Redux yet. Bu my understanding is that it allows for a global state store accessible by any component at any time. This seems like the exact solution needed. Are there any drawbacks to using it in a scenario such as this?
– Daveh0
Jan 19 at 9:50
@Sulthan - I haven't quite gotten to Redux yet. Bu my understanding is that it allows for a global state store accessible by any component at any time. This seems like the exact solution needed. Are there any drawbacks to using it in a scenario such as this?
– Daveh0
Jan 19 at 9:50
add a comment |
1 Answer
1
active
oldest
votes
First of all, you shouldn't be calling an HTTP request in componentWillMount(). Instead do so in componentDidMount() as stated in React docs
Your method is complete fine. However based on the container/presentational (smart/dump) components strategy you'd better do all your data fetching in <Dad /> component, then pass down the required data to the children. This way it would be so much easier to keep track of your requests and your data won't be scattered about.
An alternative is to use 3rd-party libraries such as Redux or Mobx State Tree. I'm not sure about Mobx, but what Redux does is it keeps the state outside of the components and make it available to the whole application by React context. You should be thinking about using this as it's extremely powerful and easy to learn
Last but no least, I will include a couple of posts here about container/presentational components pattern:
From Dan Abramov - The creator of Redux- Another medium post
answered Jan 19 at 9:48
Brian LeBrian Le
52113
great articles... and Redux sounds very promising - I've got some refactoring to do.... thanks!
– Daveh0
Jan 19 at 10:23
@Daveh0 if it helps you, an upvote and acceptance would help. Thanks! x
– Brian Le
Jan 19 at 10:25
I already did up vote... and I just want to see if any other answers roll in before accepting. Thx again.
– Daveh0
Jan 19 at 10:54
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54265632%2freact-most-efficient-way-to-share-data-between-components%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
First of all, you shouldn't be calling an HTTP request in componentWillMount(). Instead do so in componentDidMount() as stated in React docs
Your method is complete fine. However based on the container/presentational (smart/dump) components strategy you'd better do all your data fetching in <Dad /> component, then pass down the required data to the children. This way it would be so much easier to keep track of your requests and your data won't be scattered about.
An alternative is to use 3rd-party libraries such as Redux or Mobx State Tree. I'm not sure about Mobx, but what Redux does is it keeps the state outside of the components and make it available to the whole application by React context. You should be thinking about using this as it's extremely powerful and easy to learn
Last but no least, I will include a couple of posts here about container/presentational components pattern:
From Dan Abramov - The creator of Redux- Another medium post
answered Jan 19 at 9:48
Brian LeBrian Le
52113
great articles... and Redux sounds very promising - I've got some refactoring to do.... thanks!
– Daveh0
Jan 19 at 10:23
@Daveh0 if it helps you, an upvote and acceptance would help. Thanks! x
– Brian Le
Jan 19 at 10:25
I already did up vote... and I just want to see if any other answers roll in before accepting. Thx again.
– Daveh0
Jan 19 at 10:54
add a comment |
First of all, you shouldn't be calling an HTTP request in componentWillMount(). Instead do so in componentDidMount() as stated in React docs
Your method is complete fine. However based on the container/presentational (smart/dump) components strategy you'd better do all your data fetching in <Dad /> component, then pass down the required data to the children. This way it would be so much easier to keep track of your requests and your data won't be scattered about.
An alternative is to use 3rd-party libraries such as Redux or Mobx State Tree. I'm not sure about Mobx, but what Redux does is it keeps the state outside of the components and make it available to the whole application by React context. You should be thinking about using this as it's extremely powerful and easy to learn
Last but no least, I will include a couple of posts here about container/presentational components pattern:
From Dan Abramov - The creator of Redux- Another medium post
answered Jan 19 at 9:48
Brian LeBrian Le
52113
great articles... and Redux sounds very promising - I've got some refactoring to do.... thanks!
– Daveh0
Jan 19 at 10:23
@Daveh0 if it helps you, an upvote and acceptance would help. Thanks! x
– Brian Le
Jan 19 at 10:25
I already did up vote... and I just want to see if any other answers roll in before accepting. Thx again.
– Daveh0
Jan 19 at 10:54
add a comment |
First of all, you shouldn't be calling an HTTP request in componentWillMount(). Instead do so in componentDidMount() as stated in React docs
Your method is complete fine. However based on the container/presentational (smart/dump) components strategy you'd better do all your data fetching in <Dad /> component, then pass down the required data to the children. This way it would be so much easier to keep track of your requests and your data won't be scattered about.
An alternative is to use 3rd-party libraries such as Redux or Mobx State Tree. I'm not sure about Mobx, but what Redux does is it keeps the state outside of the components and make it available to the whole application by React context. You should be thinking about using this as it's extremely powerful and easy to learn
Last but no least, I will include a couple of posts here about container/presentational components pattern:
From Dan Abramov - The creator of Redux- Another medium post
answered Jan 19 at 9:48
Brian LeBrian Le
52113
First of all, you shouldn't be calling an HTTP request in componentWillMount(). Instead do so in componentDidMount() as stated in React docs
Your method is complete fine. However based on the container/presentational (smart/dump) components strategy you'd better do all your data fetching in <Dad /> component, then pass down the required data to the children. This way it would be so much easier to keep track of your requests and your data won't be scattered about.
An alternative is to use 3rd-party libraries such as Redux or Mobx State Tree. I'm not sure about Mobx, but what Redux does is it keeps the state outside of the components and make it available to the whole application by React context. You should be thinking about using this as it's extremely powerful and easy to learn
Last but no least, I will include a couple of posts here about container/presentational components pattern:
From Dan Abramov - The creator of Redux- Another medium post
answered Jan 19 at 9:48
Brian LeBrian Le
52113
answered Jan 19 at 9:48
Brian LeBrian Le
52113
answered Jan 19 at 9:48
Brian LeBrian Le
52113
answered Jan 19 at 9:48
Brian LeBrian Le
52113
52113
great articles... and Redux sounds very promising - I've got some refactoring to do.... thanks!
– Daveh0
Jan 19 at 10:23
@Daveh0 if it helps you, an upvote and acceptance would help. Thanks! x
– Brian Le
Jan 19 at 10:25
I already did up vote... and I just want to see if any other answers roll in before accepting. Thx again.
– Daveh0
Jan 19 at 10:54
add a comment |
great articles... and Redux sounds very promising - I've got some refactoring to do.... thanks!
– Daveh0
Jan 19 at 10:23
@Daveh0 if it helps you, an upvote and acceptance would help. Thanks! x
– Brian Le
Jan 19 at 10:25
I already did up vote... and I just want to see if any other answers roll in before accepting. Thx again.
– Daveh0
Jan 19 at 10:54
great articles... and Redux sounds very promising - I've got some refactoring to do.... thanks!
– Daveh0
Jan 19 at 10:23
great articles... and Redux sounds very promising - I've got some refactoring to do.... thanks!
– Daveh0
Jan 19 at 10:23
@Daveh0 if it helps you, an upvote and acceptance would help. Thanks! x
– Brian Le
Jan 19 at 10:25
@Daveh0 if it helps you, an upvote and acceptance would help. Thanks! x
– Brian Le
Jan 19 at 10:25
I already did up vote... and I just want to see if any other answers roll in before accepting. Thx again.
– Daveh0
Jan 19 at 10:54
I already did up vote... and I just want to see if any other answers roll in before accepting. Thx again.
– Daveh0
Jan 19 at 10:54
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54265632%2freact-most-efficient-way-to-share-data-between-components%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
"Correct" is subjective and opinion based. It's definitely not the best option. I see no reason why
Dadshouldn't do both requests and just pass props to children. Or, even better, use Redux architecture. Then it won't matter which component starts the request and there will be no need to send state up because everything will be stored in a shared state.– Sulthan
Jan 19 at 9:21
This shouldn't be downvoted. The question completely makes sense although it's opinion-based.
– Brian Le
Jan 19 at 9:37
I edited he title to sound less opinion-based. In general, is there any advantage to having each component fetch its own data rather than having the parent fetch it for both?
– Daveh0
Jan 19 at 9:47
@Sulthan - I haven't quite gotten to Redux yet. Bu my understanding is that it allows for a global state store accessible by any component at any time. This seems like the exact solution needed. Are there any drawbacks to using it in a scenario such as this?
– Daveh0
Jan 19 at 9:50