Kind of an interesting problem...
I have a set of components that all use connect to get the state. These components are often children of each other, sometimes deeply nested children.
I want these components to shouldComponentUpdate only when the state changes, otherwise return false. The states are immutable Maps, and I use the is(...)to verify equality. The problem is that when the state changes, some of them see the change, and some of them appear to get an old state, and see no changes. If I complete another action that changes the state, they see the previous state, but not the most recent.
Any ideas? No middleware here.
*Edit... Code. There are a lot of pieces here so bear with me
function checkNewState(nextProps, instance){
return !is(nextProps.state.reducerName, instance.props.state.reducerName)
}
const StupidParent = React.createClass({
shouldComponentUpdate: function(nextProps){
return checkNewState(nextProps, instance)
},
render: function(){
return <p>{this.props.state.reducerName.get('name')}
{this.props.replace(this)}
</p>
}
})
const StupidChild = React.createClass({
shouldComponentUpdate: function(nextProps){
return checkNewState(nextProps, instance);
},
render: function(){
return <p onClick={changeStateNameProperty}>
{this.props.state.reducerName.get('name')}
</p>
}
})
function mapStateToProps(state){
return {state}
}
export const Parent = connect(mapStateToProps)(StupidParent);
export const Child = connect(mapStateToProps)(StupidChild);
<Parent replace={(parent)=>{
return <Child />
}} />
Just a guess, but check if you use the parameter of the function shouldComponentUpdate and not the "this.prop" or "this.state" from your component. The current props/state will give you the old props/state. The new prosp/state is in the import parameters like nextProps/nextState.
shouldComponentUpdate: function(nextProps, nextState) {
return nextProps.id !== this.props.id;
}
Related
According to that link: http://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/
render() may be triggered with new props. Could someone give me a code example for that? I cannot see how props change invoke rendering! Please not by changing the props via the state; then it is setState() that invokes render()...
Look at shouldComponentUpdate() - this is it's signature - it returns a boolean. Props is there so you can compare and manually say whether the component should update.
shouldComponentUpdate(nextProps, nextState)
For function components React.memo is the replacement for shouldComponentUpdate which is used with class components.
const myComponent = React.memo(props => {
...
code of React.FunctionComponent
...
},
(prevProps, nextProps) => prevProps.propA === nextProps.propA
);
React.memo gets two arguments shown above: a React.FunctionComponent which will be wrapped around by memo and an optional function that returns a boolean.
When the function returns true, the component will not be re-rendered. If the function is omitted then its default implementation in React.memo works like the implementation of shouldComponentUpdate in React.PureComponent. E.g. it does shallow comparison of props, the difference is that only props are taken into account because state doesn’t exist for functional components.
Using hooks is neater to show. The new props data passed to ComponentB causes a re-rendering of ComponentB:
import React, { useState } from 'react'
import ComponentB from '...'
const ComponentA = props => {
const [data, setData] = useState(0) // data = 0
handleChangeProp = item => setData(item) // data = 1
return(
<div>
<button onClick{() => handleChangeProp(1)}
<ComponentB props={data} />
</div>
)
}
Yes, when you do a setState(newState) or when you pass in changed props the component will re render, this is why you can't mutate. The following will not work because you set state with mutated state.
export default function Parent() {
const [c, setC] = useState({ c: 0 });
console.log('in render:', c);
return (
<div>
<button
onClick={() =>
setC(state => {
state.c++;
console.log('state is:', state);
return state;
})
}
>
+
</button>
<Child c={c.c} />
</div>
);
}
That code "won't work" because pressing + will not cause a re render, you mutated state and then set state with the same object reference so React doesn't know you changed anything.
This is how React detects changes, you may think that comparing {c:0} to {c:1} is a change but because you mutated there actually is no change:
const a = {c:1};
a.c++;//you "changed" a but a still is a
To indicate a change in React you have to create a new reference:
const a = {c:1};
const b = {...a};//b is shallow copy of a
a===b;//this is false, even though both a and b have same internal values
This means you can also have unintended renders because you create an object prop that may have the same value but still is a different reference than the last time you created it.
Note that even <Child prop={1} will cause Child to render if Child is not a pure component (see links at the end).
What you want to avoid is doing <Child prop={{c:value}} because every time you pass prop it'll force Child to render and React to do a virtual DOM compare even if value didn't change. The virtual DOM compare will probably still detect that Child virtual DOM is the same as last time and won't do an actual DOM update.
The most expensive thing you can do is <Child onEvent={()=>someAction(value)}. This is because now the virtual DOM compare will fail even if value and someAction did't change. That's because you create a new function every time.
Usually you want to memoize creating props in a container, here is an example of doing this with react-redux hooks. Here is an example with stateful components passing handlers.
I am building a gallery app where I need to create multiple HTTP requests to pull gallery entries(images & videos).
As gallery will be auto scrolling entries, I am trying to prevent re-rendering component when I make subsequent HTTP requests and update the state.
Thanks
Here's an example of only re-rendering when a particular condition is fulfilled (e.g. finished fetching).
For example, here we only re-render if the value reaches 3.
import React, { Component } from 'react';
import { render } from 'react-dom';
class App extends React.Component {
state = {
value: 0,
}
add = () => {
this.setState({ value: this.state.value + 1});
}
shouldComponentUpdate(nextProps, nextState) {
if (nextState.value !== 3) {
return false;
}
return true;
}
render() {
return (
<React.Fragment>
<p>Value is: {this.state.value}</p>
<button onClick={this.add}>add</button>
</React.Fragment>
)
}
}
render(<App />, document.getElementById('root'));
Live example here.
All data types
useState returns a pair - an array with two elements. The first element is the current value and the second is a function that allows us to update it. If we update the current value, then no rendering is called. If we use a function, then the rendering is called.
const stateVariable = React.useState("value");
stateVariable[0]="newValue"; //update without rendering
stateVariable[1]("newValue");//update with rendering
Object
If a state variable is declared as an object, then we can change its first element. In this case, rendering is not called.
const [myVariable, setMyVariable] = React.useState({ key1: "value" });
myVariable.key1 = "newValue"; //update without rendering
setMyVariable({ key1:"newValue"}); //update with rendering
Array
If a state variable is declared as an array, then we can change its first element. In this case, rendering is not called.
const [myVariable, setMyVariable] = React.useState(["value"]);
myVariable[0] = "newValue"; //update without rendering
setMyVariable(["newValue"]); //update with rendering
None of the answers work for TypeScript, so I'll add this. One method is to instead use the useRef hook and edit the value directly by accessing the 'current' property. See here:
const [myState, setMyState] = useState<string>("");
becomes
let myState = useRef<string>("");
and you can access it via:
myState.current = "foobar";
So far I'm not seeing any drawbacks. However, if this is to prevent a child component from updating, you should consider using the useMemo hook instead for readability. The useMemo hook is essentially a component that's given an explicit dependency array.
It's as easy as using this.state.stateName = value. This will change the state without re-rendering, unlike using this.setState({stateName:value}), which will re-render. For example;
class Button extends React.Component {
constructor( props ){
super(props);
this.state = {
message:"Hello World!"
};
this.method = this.method.bind(this);
}
method(e){
e.preventDefault();
this.state.message = "This message would be stored but not rendered";
}
render() {
return (
<div >
{this.state.message}
<form onSubmit={this.method}>
<button type="submit">change state</button>
</form>
</div>
)
}
}
ReactDOM.render(<Button />, document.getElementById('myDiv'));
If you just need a container to store the values, try useRef. Changing the value of ref.current doesn't lead to re-rendering.
const [ loading,setLoading] = useState(false)
loading=true //does not rerender
setLoading(true) //will rerender
In functional component refer above code, for class use componentShouldUpdate lifecycle
I am loading data from Rest API, Container and Presentational components take it.
Container
componentWillMount() {
this.props.load();
}
componentDidUpdate() {
console.log('updated');
}
render() {
let view;
view = this.props.data ? (<Foo data={this.props.data} />) : (<H2>Loading</H2>)
return (
<div>
{view}
</div>
)
}
load - fetches data and dispatched event in reducer on success load.
#Connect
function select(state) {
const { data } = state.modules;
return {
data: data
};
}
export default connect(select, {
load: actions.data.load
})(ContainerComponent);
As far as I understand, when action is dispatched and Container component receives updated data from store, rerender should happen.
Which is strange, componentDidUpdate, according to the docs, is called when component received updated props and rerendered.
But my Foo (dumb) component never shows up even though everything is successfully dispatched without state mutation.
What could be the cause? Thanks!
One of the most common reasons for a component not to re-render is that you modify the state instead of returning a copy of the state with changes applied.
This is mentioned in the Troubleshooting part of the Redux docs.
As #kjonsson was hinting, the issue is that you directly assign state.modules.data to the data property on the select object. The reference of that data object never changes and thus the component will never re-render. What you have to do is copying state.modules.data using the spread operator, such that whenever state.modules.data changes the data field on the select object will have a new reference.
Below the adjusted code snippet.
function select(state) {
const { data } = state.modules;
return {
data: { ...data }
};
}
export default connect(select, {
load: actions.data.load
})(ContainerComponent);
Please let me know if this helps!
I'm trying to separate a presentational component from a container component. I have a SitesTable and a SitesTableContainer. The container is responsible for triggering redux actions to fetch the appropriate sites based on the current user.
The problem is the current user is fetched asynchronously, after the container component gets rendered initially. This means that the container component doesn't know that it needs to re-execute the code in its componentDidMount function which would update the data to send to the SitesTable. I think I need to re-render the container component when one of its props(user) changes. How do I do this correctly?
class SitesTableContainer extends React.Component {
static get propTypes() {
return {
sites: React.PropTypes.object,
user: React.PropTypes.object,
isManager: React.PropTypes.boolean
}
}
componentDidMount() {
if (this.props.isManager) {
this.props.dispatch(actions.fetchAllSites())
} else {
const currentUserId = this.props.user.get('id')
this.props.dispatch(actions.fetchUsersSites(currentUserId))
}
}
render() {
return <SitesTable sites={this.props.sites}/>
}
}
function mapStateToProps(state) {
const user = userUtils.getCurrentUser(state)
return {
sites: state.get('sites'),
user,
isManager: userUtils.isManager(user)
}
}
export default connect(mapStateToProps)(SitesTableContainer);
You have to add a condition in your componentDidUpdate method.
The example is using fast-deep-equal to compare the objects.
import equal from 'fast-deep-equal'
...
constructor(){
this.updateUser = this.updateUser.bind(this);
}
componentDidMount() {
this.updateUser();
}
componentDidUpdate(prevProps) {
if(!equal(this.props.user, prevProps.user)) // Check if it's a new user, you can also use some unique property, like the ID (this.props.user.id !== prevProps.user.id)
{
this.updateUser();
}
}
updateUser() {
if (this.props.isManager) {
this.props.dispatch(actions.fetchAllSites())
} else {
const currentUserId = this.props.user.get('id')
this.props.dispatch(actions.fetchUsersSites(currentUserId))
}
}
Using Hooks (React 16.8.0+)
import React, { useEffect } from 'react';
const SitesTableContainer = ({
user,
isManager,
dispatch,
sites,
}) => {
useEffect(() => {
if(isManager) {
dispatch(actions.fetchAllSites())
} else {
const currentUserId = user.get('id')
dispatch(actions.fetchUsersSites(currentUserId))
}
}, [user]);
return (
return <SitesTable sites={sites}/>
)
}
If the prop you are comparing is an object or an array, you should use useDeepCompareEffect instead of useEffect.
componentWillReceiveProps() is going to be deprecated in the future due to bugs and inconsistencies. An alternative solution for re-rendering a component on props change is to use componentDidUpdate() and shouldComponentUpdate().
componentDidUpdate() is called whenever the component updates AND if shouldComponentUpdate() returns true (If shouldComponentUpdate() is not defined it returns true by default).
shouldComponentUpdate(nextProps){
return nextProps.changedProp !== this.state.changedProp;
}
componentDidUpdate(props){
// Desired operations: ex setting state
}
This same behavior can be accomplished using only the componentDidUpdate() method by including the conditional statement inside of it.
componentDidUpdate(prevProps){
if(prevProps.changedProp !== this.props.changedProp){
this.setState({
changedProp: this.props.changedProp
});
}
}
If one attempts to set the state without a conditional or without defining shouldComponentUpdate() the component will infinitely re-render
You could use KEY unique key (combination of the data) that changes with props, and that component will be rerendered with updated props.
componentWillReceiveProps(nextProps) { // your code here}
I think that is the event you need. componentWillReceiveProps triggers whenever your component receive something through props. From there you can have your checking then do whatever you want to do.
I would recommend having a look at this answer of mine, and see if it is relevant to what you are doing. If I understand your real problem, it's that your just not using your async action correctly and updating the redux "store", which will automatically update your component with it's new props.
This section of your code:
componentDidMount() {
if (this.props.isManager) {
this.props.dispatch(actions.fetchAllSites())
} else {
const currentUserId = this.props.user.get('id')
this.props.dispatch(actions.fetchUsersSites(currentUserId))
}
}
Should not be triggering in a component, it should be handled after executing your first request.
Have a look at this example from redux-thunk:
function makeASandwichWithSecretSauce(forPerson) {
// Invert control!
// Return a function that accepts `dispatch` so we can dispatch later.
// Thunk middleware knows how to turn thunk async actions into actions.
return function (dispatch) {
return fetchSecretSauce().then(
sauce => dispatch(makeASandwich(forPerson, sauce)),
error => dispatch(apologize('The Sandwich Shop', forPerson, error))
);
};
}
You don't necessarily have to use redux-thunk, but it will help you reason about scenarios like this and write code to match.
A friendly method to use is the following, once prop updates it will automatically rerender component:
render {
let textWhenComponentUpdate = this.props.text
return (
<View>
<Text>{textWhenComponentUpdate}</Text>
</View>
)
}
You could use the getDerivedStateFromProps() lifecyle method in the component that you want to be re-rendered, to set it's state based on an incoming change to the props passed to the component. Updating the state will cause a re-render. It works like this:
static getDerivedStateFromProps(nextProps, prevState) {
return { myStateProperty: nextProps.myProp};
}
This will set the value for myStateProperty in the component state to the value of myProp, and the component will re-render.
Make sure you understand potential implications of using this approach. In particular, you need to avoid overwriting the state of your component unintentionally because the props were updated in the parent component unexpectedly. You can perform checking logic if required by comparing the existing state (represented by prevState), to any incoming props value(s).
Only use an updated prop to update the state in cases where the value from props is the source of truth for the state value. If that's the case, there may also be a simpler way to achieve what you need. See - You Probably Don't Need Derived State – React Blog.
I think this is a trivial use case but I am still getting to grips with aspects of Flux and React. In my example I am using Reflux and React Router.
I have a basic component that displays the details of a sales lead. Using the lead id from the URL parameter, it makes a call to my service to get the lead:
var React = require('react'),
Reflux = require('reflux');
var leadStore = require('../stores/lead'),
actions = require('../actions');
var Lead = React.createClass({
render : function () {
var p = this.props.lead;
return (
<div>
<h2>{p.details}</h2>
<p>{p.description}</p>
</div>
);
}
});
module.exports = React.createClass({
mixins: [Reflux.connect(leadStore)],
componentDidMount : function () {
actions.loadLead(this.props.routeParams.id);
},
render : function () {
if (!this.state.lead) {
return (
<Lead lead={this.state.lead} />
);
}
return (
<div>Loading</div>
);
}
});
If I don't include the conditional check then on the first pass the render method will fire and kick off an error because there's nothing in state. I could set some default state parameters but what I would ultimately like to do is show a pre-loader.
The approach I've taken feels wrong and I was wondering what the common practice was for this situation? All the examples I've seen use default states or pre-load mixins. I'm interested in knowing if there's a better way to make use of the component life-cycle?
Aside from if (!this.state.lead) should be if (this.state.lead) it looks ok. Another way would be.
module.exports = React.createClass({
mixins: [Reflux.connect(leadStore)],
componentDidMount : function () {
actions.loadLead(this.props.routeParams.id);
},
render : function () {
var returnIt;
if (this.state.lead) {
returnIt = (<Lead lead={this.state.lead} />);
} else {
returnIt = (<div>Loading</div>);
}
return (returnIt);
}
});
React Wait to Render is worth checking out. It's a tiny component that will display a loader until all of the component's props are defined, e.g. while we wait for lead data. Good for keeping the render clean, as easy as:
<WaitToRender
wrappedComponent={Lead}
loadingIndicator={LoadingComponent}
lead={this.state.lead} />
You can also use it to decorate your Lead component.