I'm using Redux for state management. I haven't ran into many problems with it until I've moved my Navigation stack to use pop() appropriately. The issue is actually quite simple:
Route A displays some data and moves the user to Route B.
On Route B the user changed the data displayed on Route A.
The user then hits the back button, and pops to Route A.
Route A has not updated, even though the redux state has been.
I must then exit Route A, and return to Route A through a .push() in order for the changes to take affect.
I'm trying to find a solution for this, but cannot. Is there any way to determine when a component enters the front screen again? As render() isn't called again, because it doesn't receive any new props while in the background, so there' no reason for it to be called.
Basically on pop(), the component is already mounted so it won't re-render anything. I really hope they eventually add an onFocus() method to components but the way I handled it is by passing the method that updates component A to component B when you push, then invoke it when you're popping so component A will re-render with the new information.
Related
My React app is currently fairly simple in terms of structure, though the logic in the components is getting more intense. The structure is basically Index which has a Header component and, if the user is logged in, will load the Home component, which has components X, Y, and Z on it, corresponding to left sidebar, main area, and right sidebar.
As I'm working on the right sidebar, I have some console.log() statements to help out. I'm now noticing that the right sidebar Z component appears to render 7 times for a given fresh page load, based on how frequently I see my logging. This component has the rough following code:
Declaring various states for the component using React.useState([default value])
Checks the Redux store to fetch the currently authed user of my app (authedUser)
A React.useEffect() that checks if there is an authed user and if so, sets a couple component states. This useEffect triggers off of , [authedUser]); - I suspect this may be a cause of the rerendering?
Some click event handlers, including a more complex one that makes Google API calls when a certain button is clicked, using
The Redux store value for authedUser is used in Index, Header, and Z. The dispatch call that can change this store value only happens within functions relating to the user logging in.
Questions:
Am I right in being concerned that this component is re-rendering so much?
Any ideas on what might be causing it?
Are there any tools I can use to answer the "when/why is this re-rendering?" question?
You have a home component and three children's components on it. You may have a state variable in your home component and pass these state variables as props on to child components. Your home components re-render each time when each state variable changes its state, resulting in child components having to be re-rendered. So as to make the child component re-render only when its related state variable changes its state, you need to use the react memo and the useCallback hook.
I have Component A and Component B. In component A, users can apply filters to a list of elements and they navigate between the two components using a side bar. Whenever users click to go to B, and back to A, the filters are set back to the initial state. What is the best way to save the state of component A so that when they come back to it, they see all of the filters they originally applied.
I Suggest you to use LocalStorage , pass in the filter so that it won't be reset. Upon mounting the component , you should always check first if does the localstorage have a value or not.
you can set it via :
localStorage.setItem('variableName', value);
and get it via :
localStorage.getItem('variableName');
It sounds like A is being created/destroyed every time you switch views, so it loses any state that it was storing.
Move the state up to a parent component of both A and B, and pass it down to A via props. The parent component won't be destroyed, so the state will persist.
Thinking in React may help clarify this.
In my knowledge; State in react is not cleared until it is programmed to do so, the page is refreshed or going to another page. Maybe it'll be more clear if you provide your code. One thing which I used to keep previous State is following:
this.setState((previousState) => ({ stateName: previousState.stateName.concat(newValue) }))
I think the parent state of A and B won't change unless you refresh the page.
Another way, you can use AsynStorage or store that data on the Server to retrieve it later when coming back to component A even you refresh the page.
I have a react.js app which loads data from an API displays a bunch of questions (textboxes, radiolist, checkboxes, etc). The user fills them in and submits all answers back to the API, which then send a new set of questions.
All these questions are in a single object, so I've created parent react.js component which holds the current set of questions in state. When the state changes it re-renders each question below. This works pretty much fine.
The problem is that sometimes the API displays the exact same question for twice in a row, but as this is held in state and react.js is clever enough to know it doesn't need to render a completely new component, because the old one will do (with a few small updates).
The problem is that if I select a radio button on the first one, based on the initial data stored in state of the child component, which was initially set within componentDidMount). But when the second question comes along, because its essentially the same component, the state remains. The constructor is not called again.
I think I should be using one of the other events, perhaps:
componentWillReceiveProps
componentWillMount
componentWillUpdate
but I can't figure out which one is the most consistent one.
I basically want to reset the selectedAnswer everytime the parent has received new data from the API and essentially re-render all child components (but react won't do that).
Edit
I wonder instead of trying to reset this via the internal lifecycle events, whether I can pass in a different set of props into the component, so it can decide whether to re-create or re-render in the usual way.
okay so to optimally do this lets suppose you api which returns the set of questions, it might contain some id associated with it. Using that id create a uniq key for every child component while rendering something like below
<Child key={`${data_id}_${index}`} />
This will ensure that for the same set they do not keep mounting again and again and will only mount if a new data set is fetched in which case data_id will change which would cause remounting of each and every child component
I'd encourage you to check out Redux. It makes managing state much easier. I'd contribute some code on here but I am not sure I actually understand the question. If you linked us to your Github, then I could probably answer this specific question.
Also, it seems like you don't really need to touch state. It sounds more life attaching an event and controlling state that way. For example, using onSubmit, you can make an API call (and whatever else) and then have another function to reset the form state afterwards. It would be pretty straight forward, especially if you are using then/catch Promises.
I have a problem: I have a NavBar that loads an AJAX which retrieves a name and another data. Well, the problem is that this data stores them in states of the declared component itself as NavBar.jsx and when I use routes (react-router) the component is mounted and dismantled losing its states, therefore, every time that change of route has That re-make the AJAX call. This same problem I have for a button 'Enter', which has status 1 and when someone is logged in takes 0 status, but every time I change the route returns to state 1 (as if it were not logged, although it is actually logged). My question is: How can I create states that are maintained despite changing routes? (I know this is not possible, with states I am referring to variables, or anything I can declare that does not change value every time you reassemble the components, in this case NavBar, when changing paths. Thank you.
This can be solved in several ways.
save the returned data in localStorage, check in localStorage before doing the ajax call, is the data exists, just use it instead.
Use redux - this moves the state to the app level instead of the component, unmounting the component will not delete the state.
do not re-render the navbar on each navigation(if it's possible in your app).
See the tutorial for nested routes for react-router ;
https://github.com/reactjs/react-router-tutorial/tree/master/lessons/04-nested-routes
this option means that route changes will only re-render the "internal page" and not constant things like the navbar, submenu, footer etc.
I have a page in my react/redux app that has a search field and I can make an ajax request based on input and display the result on the screen. The problem is that whenever I leave the page and return back it preserves the data I fetched. What is a conventional way of resetting a component whenever you leave the page? I should probably do something with componentWillUnmount function, but things don't quite work.
You store the state in a redux store. Thus the behavior - the data is still there in the store when you navigate between pages. It needs to be removed upon navigating away from page. This could be done by dispatching a reset action from the componentWillUnmount lifecycle method of the page component.
Do you need to be storing the fetched data in your redux store? If you are looking for the data to be loaded every time you go to the page and reset whenever you leave, just storing the data in component state would probably be a better fit, since it gives you that behavior by default.