I have splitted my page into few components and I need to force the other components to refresh their contents on the screen whenever a change happens in one of them.
It is possible to force parent and child components in react js to refresh each other but I wonder how I can handle this scenario when the components are not parent and child .
I know one way is to merge all of them in a single component and handle that but it makes source un-modular.
I have googled this and all the posts are about parent and child components.
Any recommendation would be appreciated.
You should use some form of state management solution, be it redux or the React Context API.
This is the only scalable solution to updating multiple components that are not directly hierarchical.
Related
As RNN screens are not part of the same component tree, updating the values in the shared context does not trigger a re-render across all screens. However you can still use the React.Context per RNN screen component tree.
The only suggestion is to use redux. Im sure its possible to achieve this somehow using only context but I dont know how?
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?
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?
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.
Im creating a popup that will be shown to the user after login. He should select an option that will be shared in all components as prop. Everytime this popup is open and the value change, all the component should be updated. Do you have any tips on how I should do it. Thanks
The best way would be using redux or context to have global state that can be shared with all of your components. I do not know your app volume and component numbers but if you are looking for a basic way for basic app, you can set this popup states in parent component of your app and pass this state as props to your children components. Another way would be implementing this with backend that you can do post request each time when you change your popup data and do get request in your children components
I'm fairly new to React, and I was trying to create an app that functioned thusly:
The app consists of several Pages, with multiple Components on each Page.
One of these Components is stats, which can change as the user interacts with Components on the Page.
When a user clicks on a certain Component, they will be taken to a "different" page, which is really just another Page, with different text, data, etc. This is carried out through the browserHistory.push() method. I would like to be able to carry over the changed 'stats' component from one Page to the next, but I am not sure how to do so. Furthermore, since I set the default value for stats in the Page component, it seems that any attempt at passing the changed values into the new Page would result in the new values being overridden. Can anyone help me?
Thanks.
State should live above the level of all components that need access to that state.
Remember that one of the principles of React is "one-way" data flow down the component hierarchy. Essentially, data/state should live at a high level, getting passed down to child components and consumed as needed.
In your case, you have some "stats" data that needs to be displayed across multiple Pages. So, "stats" needs to be owned by a component above all of your Page components - perhaps at the root component of the app itself. Pages themselves would just take the data in and render it, potentially with some callbacks appropriate for editing the data.
Read a bit more about Facebook's philosophy for React in "Thinking in React" in the official docs: https://facebook.github.io/react/docs/thinking-in-react.html#step-4-identify-where-your-state-should-live
One option to consider is to use React Redux to store the state of your application. You would then use mapStateToProps (See Redux API for details) to map the state into props for your stats component.
I was looking on how to communicate between 2 ReactJS components that doesn't share a parent, so it our just the root components on the page.
With some help of the internet, I've found our that Redux is the library that should be used, so that events are delegated to a store.
But where does this fit in the story if I want to create a simple component that's reusable, for example a button that's controllable from within other components?
Each button must have it's own unique events, but I don't see on how to do it practically.
Am I missing something here?
Yes, Redux (or any state management library) is the way to go. In Redux, for instance, you've got two types of components: dumb components and high order components. High order components are used to connect with Redux state (see react-redux). So you can implement your button as a dumb component, which does not depend on Redux in any way, and connect to Redux in the root component