Calling setstate on a parent component forces componentDidUpdate on its children? - javascript

I have two components, parent component App and child component SearchBar, I want SearchBar to keep its own state, and after updating its state to call a function given by its parent as a prop that will update its parent state.
So on my SearchBar component I have
onSearchChange(event) {
.
.
.
this.setState({ searchTerm });
}
And then
componentDidUpdate(){
this.props.onSearchChange(this.state.searchTerm)
}
And on the parent component
onSearchChange(searchTerm){
this.setState({searchTerm});
}
render() {
return (
<div className="App">
<div>
<SearchBar onSearchChange={this.onSearchChange}/>
</div>
.
.
.
</div>
);
}
But this causes an infinite loop where SearchBar's componentDidUpdate gets called which calls its parent onSearchChange to update the parent state but then SearchBar's componentDidUpdate its called again an so on.
If I use a callback in setState instead of componentDidUpdate to update its parent state it works correctly, but I just don't understand why SearchBar its updating if its prop its constant.

componentDidUpdate provides two arguments prevProps and prevState, with it you can check if actual props or state has changed and then make changes to current state/props.. for example:
componentDidUpdate(prevProps, prevState){
if(prevState.searchTerm !== this.state.searchTerm) {
this.props.onSearchChange(this.state.searchTerm)
}
}

Related

render react component when prop changes

how to force render our component when props changes?
how to force render parent component when child component's props changes?
i searched a lot but all solutions are deprecated in new React version.
in my any pages (Route exact path="/post/:id" component={post}) for example (siteUrl/post/1) i am getting (:id) from props (this.props.match.params) and that works.
but when i am in single page component (Post) and this Route (siteUrl/post/1) when i am passing new Props to this component (:id).
props will changes but single component and parent component Will not re render...
You may be using componentDidMount method.
componentDidMount() is invoked immediately after a component is
mounted (inserted into the tree). Initialization that requires DOM
nodes should go here. If you need to load data from a remote endpoint,
this is a good place to instantiate the network request.
but you need to use componentDidUpdate.
componentDidUpdate() is invoked immediately after updating occurs.
This method is not called for the initial render.
You can also use state and other React features without writing a class.
read more: https://reactjs.org/docs/hooks-effect.html
To make both parent and child re-render you need to path prop from parent to it's child.
// parent using
<Parent someProp={{someVal}} />
// parent render:
render() {
const { someProp } = this.props
<Child someProp={{someProp}} />
}
this will surely re-render both components, unless you stated another logic in componentShouldUpdate
in your case Router looks like a parent for Parent so you should only path :id as a prop.
Make sure Router is at the top level, right under the App
Important is ,that you initialise the someVal of the child first in the constructor
public static getDerivedStateFromProps(
nextProps,
nextState
) {
let { someVal } = nextProps;
if (nextState.someVal !== someVal) {
return {
initialVal,
someVal: someVal
};
}
return null;
}
After it will rerender on prop changes because the state changes

React.js/Redux - How to update state if props wasn't changed?

I want to update my local state if the props were changed. But I could not find a suitable solution to this problem. getDerivedStateFromProps gives me only nextProps and prevState but I need both prevProps and nextProps. Please write any your solution that might solve this problem)
Situation: The Cart component (stateful) gets the fetched data from the props and puts that data in this.state.cart. The Cart component has counterHandler method that triggers whenever the counter is changed (onIcrease, onDecrease, onChange). This handler calculates the data and makes a new data based on the event ( calculating totalPrice and updating the amount of the item ). Then puts the new data into setState to update the UI. The state doesn't change because I do this:
static getDerivedStateFromProps(nextProps, prevState) {
if (!_.isEqual(nextProps.cart, prevState.cart)) {
return { cart: nextProps.cart };
} else return null;
}
I do this because I want to update the state when the real data is changed ( the data that comes from the props ).
Goal: updating the counter's and the total price's value without making any-side effect ( the values might be updated in the store or only for the local state ).
This is what I mean:
You might want to use componentDidUpdate which is called when the props on the component update. It receives prevProps and prevState as parameters, and you have access to "nextProps" as this.props.
For example
componentDidUpdate(prevProps, prevState) {
if (!_.isEqual(this.props.cart, prevState.cart)) {
this.setState ({ cart: this.props.cart });
}
}
You can use componentWillReceiveProps method of react class. This method will be executed when parent component will render, its child will execute componentWillReceiveProps method in child. In this method in child you can update state based on new props.
componentWillReceiveProps(nextProps){
//You can access current props via this.props
//You can access newProps from argument
//Change component state after comparing both props
}

How to update state with Relay QueryRenderer props

I have a react component with a form for updating database records.
Here's the thing: the data is loaded with React-Relay QueryRenderer component as follows:
class Update extends Component {
//constructor..
//some stuff
render() {
return(
<QueryRenderer
environment={environment}
query={UpdateQuery}
render={({error, props}) => {
//validations
return (
<Form loading={this.state.loading}>
//inputs
</Form>
)...
}/>
)}
The props variable is supposed to store the result from server response if successful. However, I need to call the update with this.state values.
I need a way to setState with props values.
I have tried with componentDidMount and using refs both string refs and callback ones to get defaultValue from Inputs. I got undefined values when calling this.refs
For now, it works if I call a function within QueryRenderer render function that sets the state with props if state is empty. E.g
function initValues(props){
if(!this.state.name)
this.setState({name: props.result.name})
}
But it results in an anti-pattern (pure render method) that I need to solve.
Edit:
For anyone wondering how I solved this. Thanks to charlie's answer I managed to create a UpdateForm component wrapper that receives the props from QueryRenderer, and in order to update my parent's component state I passed my handleChange function as props to my FormUpdate component
Use componentWillReceiveProps in your Form component
class Form extends React.Component {
...
componentWillReceiveProps(nextProps) {
if (nextProps.loading) return
this.setState({
name: nextProps.name
})
}
...
}
This will only set the state once as soon as the data is available, since QueryRenderer only calls render once after the data has loaded.

What happens when setState() function is called?

What does the setState() function run? Does it only run render()?
What does the setState() function run? Does it only run render()
No setState not only calls the render() function but after setState, the following lifecycle functions will run in order depending on what shouldComponentUpdate returns
if shouldComponentUpdate returns true(which is true by default).
1. shouldComponentUpdate
2. componentWillUpdate
3. render()
4. componentDidUpdate
if shouldComponentUpdate returns false(if you have a custom implementation)
1. shouldComponentUpdate
One more thing to know about setState is that, it only triggers the re-render for the current component and all its children(considering no implementation of shouldComponentUpdate for any of its children), Its doesn't trigger a re-render of the parent component and hence the reconcilation doesn't happen for the parent components but only for itself and its children.
A DEMO of what happens when setState is called.
class App extends React.Component {
state = {
count: 0
}
componentWillReceiveProps(nextProps) {
console.log('componentWillReceiveProps parent');
}
shouldComponentUpdate() {
console.log('shouldComponentUpdate parent');
return true;
}
componentWillUpdate() {
console.log('componentWillUpdate parent');
}
render() {
console.log('render parent')
return (
<div>
<Child count = {this.state.count}/>
<button onClick={() => {
console.log('callingsetState');this.setState((prevState) => ({count: prevState.count + 1}))}} >Increase</button>
</div>
)
}
componentDidUpdate() {
console.log('componentDidUpdate parent')
}
}
class Child extends React.Component {
componentWillMount() {
console.log('componentWillMount child');
}
componentDidMount() {
console.log('componentDidMount child');
}
componentWillReceiveProps(nextProps) {
console.log('componentWillReceiveProps child');
}
shouldComponentUpdate() {
console.log('shouldComponentUpdate child');
return true;
}
componentWillUpdate() {
console.log('componentWillUpdate child');
}
render() {
console.log('child')
return (
<div>
<div>{this.props.count}</div>
</div>
)
}
componentDidUpdate() {
console.log('componentDidUpdate child')
}
}
ReactDOM.render(<App/>, document.getElementById('app'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>
To add an explanation for the question that #poepje added on your question
What setState does?
setState() enqueues changes to the component state and tells React that this component and its children need to be re-rendered with the
updated state. This is the primary method you use to update the user
interface in response to event handlers and server responses.
React has a very good documentation on this function here
You could also see the following answer on how setState works:
setState doesn't update the state immediately
The setState() will run functions in this order:
shouldComponentUpdate()
componentWillUpdate()
render()
componentDidUpdate()
If your component is receiving props it will run the componentWillRecieveProps() function with the above functions.
The first thing React will do when setState is called is merged the object you passed into setState into the current state of the component. This will kick off a process called reconciliation. The end goal of reconciliation is to, in the most efficient way possible, update the UI based on this new state.
To do this, React will construct a new tree of React elements (which you can think of as an object representation of your UI). Once it has this tree, in order to figure out how the UI should change in response to the new state, React will diff this new tree against the previous element tree.
By doing this, React will then know the exact changes which occurred, and by knowing exactly what changes occurred, will able to minimize its footprint on the UI by only making updates where absolutely necessary.
The setState() will run functions in this order:
shouldComponentUpdate()
componentWillUpdate()
render()
componentDidUpdate()
If your component is receiving props it will run the componentWillRecieveProps() function with the above functions.
Just an update to this answer:
https://stackoverflow.com/a/45273993/7310034
(since lifeCycle methods are now updated)
setState() will run functions in this order:
getDerivedStateFromProps()
shouldComponentUpdate()
render()
getSnapBeforeUpdate (if exists)
componentDidUpdate()
According to this:
http://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/

update child component when parent component changes

I'm kind of new to React js. I have two questions. Here I go
Question 1
I wanted to update(re-render) the child component when I update(re-render) the parent component. After some googling, I found out that when the props are changed and we call the forceUpdate function only the parent component is updated not the child component. If I wanted to update the child component I needed to needed to use setState function and set something in the state to update the child. But the problem that I'm facing is that when I set state in the parent component the child component is not updated. The render method of the child is not called. Can somebody please tell me what is it that I'm doing wrong?
Parent.jsx
class Application extends React.Component {
isBindEvents=false;
componentWillMount(){
let {dispatch} = this.props;
dispatch(getCompanyInfo( "abcd.com", (res) => { // THIS IS A ACTION CALL
this.props.user = res.data.user;
this.setState({name:res.data.user.name})
this.forceUpdate()
}))
}
render(){
return ( <div className='react-wrapper'>
<ABCD {...this.props} /> // THIS IS THE CHILD COMPONENT WHICH I WANT TO RE-RENDER WHEN THE PARENT COMPONENT CHANGES
<div >
<div id="body" >
<div>
<div >
<div className="container-fluid">
{this.props.posts}
</div>
</div>
</div>
</div>
</div>
</div>)
}
}
export default connect(mapStateToProps)(Application)
CHILD.JSX
class ABCD extends React.Component {
render() {
let isShowUser = this.props.user
? true
: false;
return (
<div> Here is the user name {isShowUser? this.props.user.name: 'user not present'} </div>
);
}
}
export default connect(mapStateToProps)(ABCD);
Now what I'm doing is that when the application component is mounting I generate an ajax call to my backend server and when it return it updates the props and I set the state so that that child component is also rerendered but the child component is not re-rendering. Can somebody please tell me what's is going wrong.
Question 2
The next question is related to react router I'm using react router for the routeing.This is how I'm using router
module.exports = {
path: '/',
component: Application,
indexRoute: require('./abcd'),
childRoutes: [
require('./componentTwo'),
require('./componentOne'),
]
};
Now let's suppose I'm going to component Two route which will render component Two and I generate a ajax call in application component and on the basis of the data returned by the ajax call I set some props in the application component and I also want the component Two to re-render as soon some props are changed in application is there any way to do that
Thanks any help will be appreciated
this.props.user = res.data.user;
You can't assign to props. Props are passed from a parent. Set the user in the state and pass the state to your child component like so:
<ABCD {...this.props} user={this.state.user} />
In your child component you will now have access to this.props.user. Also the this.forceUpdate() will not be needed then.

Categories