I know that React performs re-render when state or props change(or when we force component to re-render). I also know that React re-renders component's children when it gets re-rendered.
I've noticed that React re-renders child component even if its props(the child props) didn't change, so when the parent component passes the same props as previously.
Why is that? And does React re-render child component which is completely stateless and propless?
If you want child components not to re-render, you should use React.memo, PureComponent, or the shouldComponentUpdate lifecycle hook.
Each of these three options tell React that if the inputs to your component (props) don't change, then there's no point in re-rendering the component as the component won't change.
PureComponent or shouldComponentUpdate should be your go-to options if you are working with class components. Essentially, PureComponent just implements shouldComponentUpdate for you.
React.memo should be your go-to when using function components. And React.memo has a second argument for a function to determine equality, which acts similarly to shouldComponentUpdate.
You should definitely use one of these three options over reselect when working with react components. Reselect is meant for memoizing selectors in redux (or just general function calls). It is not meant for memoizing react components.
I generally use reselect to make the props to the components stable (when working with connect) and prevent recomputing complex data on every render.
Why React does that by default is because it does not know to not re-render when the state is the same, unless you employ memoization on those components with a package like reselect.
What reselect helps you do is to only re-render componets when the state being passed is different from the current.
Related
I have recently started learning React.js and am currently on the topic of component lifecycle. Forgive me if I'm wrong about my explanation.
I feel I understand the basics of the component lifecycle methods (hopefully) from the componentDidMount and componentDidUpdate phases.
The course I am learning from shows me an example of the lifecycle (please see the screenshot below) when the value 'Max' is changed to 'Maxi'. I have edited it to show how the components are rendered (in terms of parent and child components).
From my understanding from the screenshot, when the value of Person.js component changes, the lifecycle methods start from the top of the component tree (App.js).
Notice [App.js] render.
I see that from this, Persons.js is the only component being re-rendered? (you can see the elements highlighted in green which identify which parts were rendered.)
So am I correct in saying [App.js] render isn't re-rendering the whole App component to apply that 'Maxi' change, only Persons.js?
If so:
What does it do at that stage?
does it render in to the virtual DOM but not on the actual DOM?
If [App.js] render DOES re-render it and its child's to apply the 'Maxi' change :
Why can't React start the component lifecycle from Persons.js? instead of at the top of the component tree App.js?
React class component lifecylce
React Hook lifecylce
I use vuex for state management. Let's say i Have n components using the vuex to access the data. All the n components are using the state and have bound to the view. So I want to know if component1 changes the state, let's say remove a particular element, how can I trigger the the n-1 components to update the view with the regarding state. Can it done with the computed function or is there an other more efficient way to update the views with the correspondent state.
Kind regards.
using computed
as you mentioned the clean way is to use computed property. within the functions you can access this.$store.state and change the behaviour of component n+1 depending on n.
including changes in action
another way would be that your action simply triggers mutations for element n and n+1.
styling related changes
just to mention it, when you want a component to be conditionally displayed or styled, it is often enough to set a class on the modified component n and using conditional styling based on this class to style n+1.
I have a parent component that has state and a child component that uses the youtube-react api to create a video player. The child component contains both state and methods that are used to work on the video player (e.g. event handlers).
I want to ask if should I separate out the child component by making it a stateless functional component? I can do this by placing all the methods and state of the child in the parent component and then pass all relevant methods/data down to the child via props.
My concern with separating the child component is that will make understanding how everything works confusing. Also, it will result in a huge parent component as the parent component already contains methods and state for other child components.
I think it all breaks down to personal preferences. I like to write components which are reusable and handle all the logic by themselves, so that I can use them as often as possible. This could result in some components get bigger then others.
I think a good starting point is here: https://reactjs.org/docs/thinking-in-react.html
I was wondering in terms of efficiency, if I have just this line in a file, as set up by create-react-app,
ReactDOM.render(<App />, document.getElementById('root'));
and a class in another file called App, which contains call to many other classes and perhaps calls to classes from other files, will a small change in one of those sub-classes require a re-rendering of the entire App class, or just that individual class or classes that require a change. I hope this makes some sense. Thanks!
Generally react rerenders tree if shouldComponentUpdate returns true. It means that Classical react component class Component1 extends React.Component, rerenders every time. If you want the child components to be rerendered only if its properties changes, you should use React.PureComponent which provides shouldComponentUpdate which makes shallow comparison of properties.
I have some data in the rough form of:
Parent->child->grandchild->great grandchild
I have created a component for each level in the tree, with the top component storing the whole tree as state, and passing branches down via props etc to its children.
As the top component manages the state, it is responsible for CRUDing any of the children. If I simply want to add a new great-grandchild, I will have to replace the entire state tree on the parent component. Is this a vastly inefficient approach, or will React work out which components to re-render? Is there a better or more idiomatic way of achieving what I need?
For this React supports "keyed children". This basically means adding a key={someUniqueId} attribute to all your child components.
"When React reconciles the keyed children, it will ensure that any child with key will be reordered (instead of clobbered) or destroyed (instead of reused)."
To answer your question
Is this a vastly inefficient approach?
Yes, if you do not use keyed children for every small change in one of the leafs the whole tree will be rebuild from the root up.