hello and welcome to code sketched in our previous video we got to learn about the true meaning of the term rendering we learn about what the react Library actually does when it renders our code onto the browser you can check it out here in today's video we tackle a somewhat related yet intriguing question and that is when does the react component re-render let's begin first of all we need to ask ourselves why does a react component need to re-render after the first render well an average react component that we build is a culmination of several State variables and props the UI is computed based on the value of those variables which means that it needs to be recomputed when those values change if react components did not re-render we would keep seeing the same UI all the time and it would be similar to a static page from the early internet days now that we know what purpose re-rendering serves let's see when it actually happens if you ask any reactive about this you might get the answer as a component re-renders whenever its state changes or the props pass to it change that's the kind of weak sentence that would definitely anger the react gods that explanation seems logical but is not accurate let's see what actually happens let us take the example of this app component it displays a simple counter which increments the count on every press of the increment button inside of this app component there is the counter component which consists of a big number a button and a state variable called count let us try to press that button and see what happens when we click the increment button we are updating a state variable in the counter component with u state due to this the counter component re-renders when that happens all the components inside of the counter component re-render which includes the big count number component and we see the updated number on the UI do note that because the state that got changed was in the counter component nothing outside of the component needs to be rendered which means our app component does not re-render only the counter and the big count number component do but why do you think the big count number re-rendered is it because it accepts the count variable as a prop and that got changed let's find out if we create another component called test component and place it inside the counter component as it does not accept count as a prop we would expect it not to re-render right but to our surprise it does re-render even though it does not have any dependency on the count State variable well that happens because in react whenever a parent component renders all the child components inside of it re-render but why does that happen it happens because react assumes that all the components are not pure which means that the rendered output of those components does not just depend on the inputs that are provided to it may be the test component needs to call an API and get the latest data on something that has now changed from the last time it rendered maybe it just accesses the current time and need to render that on the UI you see how easy it is for a component to be not pure due to the so-called side effects that is why react does not want to take any risks and find it better to just render all the children and generate the latest UI with that new information you might be thinking it would be a huge performance problem and might even be scared to create react components with a large number of children but don't worry that is where the Brilliance of react comes into the picture even though react is rendering all those components multiple times it does not mean that is actually creating the entire Dom from scratch every time there are some amazing optimizations like reacts reconciliation algorithm which detects the bare minimum changes that need to be made to the Dom with the help of the virtual Dom and makes those updates surgically so don't worry you can go all crazy with your componentry but if you actually know that your component is in fact a pure component and you do not want to react to re-render it every time the parent renders you can do that with react.memo by wrapping a component in react.memo we are telling the act that the output of this component will only depend on the props it receives and thus react memorizes the result and reuses the same when it receives the same props do comment below if you would like to see a video that goes in depth into react.memo so that clears up our assumption site seeing that react component re-renders when its state or props change is not accurate but in fact it re-renders when its state changes and due to this it triggers a re-render on all of its children the rendering in itself is a well optimized process thanks to the conciliation but we can take a veto and ask react not to re-render it by using react.memo I will leave a link to an in-depth article by Josh that inspired me to create this video do check it out if you want to go deeper see you in the next one