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
Related
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.
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
By this I mean, when mounted, the enter animation is ran, and when removed, the leave animation is ran. I have a transition that needs to animate a number of elements within it on enter and leave, so I want to move all the code into its own component, then
<template>
<transition #enter="enter" #leave="leave">
<!-- component -->
</transition>
</template>
---
<CustomComponent :key="indentifer" :indentifer="indentifer" />
Full example of my attempt: https://codesandbox.io/s/znq6l8p94p
As far as I am aware this is only half working because of the appear, i.e. it's just mere coincidence.
I feel like the only way I can solve this is by doing all the animation and state management in one component, as in a component that knows about the old and new sentences or use a transition-group, rather than just leaving Vue to manage that for me via my use of the key attribute. Am I perhaps misunderstanding how best to do transitions in Vue, should the animation all ways reside with the parent of a component?
After writing this out it feel like what I actually want is lifecycle hooks like transition-group offers, but which call the child components methods directly.
My current understanding is that during v-on:leave the component is no longer reactive, and you should only be doing manual dom-manipulation...
Instead, my solution was to create a component that handled the adding and removing of the elements via a watch and then passed the array through to my component in props.
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'm trying to shallow render a component to perform some basic unit tests.
The component I am doing this on has two child components which are rendered several times each depending on the parents props.
When querying the shallow rendered component, the child elements are being rendered -fully- also, meaning that the children's HTML elements are also accessible.
I am using Karma, Browserify, Jasmine and Enzyme, and can post the configs for each if needed. Has anybody seen similar behaviour before?
This is the correct behaviour. The different to the other render methods from enzyme is, that it does not call any lifecycle methods and that it does not convert to real html, but it will render all its childs and childs of the childs and so on.