In React, why doesn't changing non-state props prompt rerenders?

Question

I found this on internet "React components automatically re-render whenever there is a change in their state or props", but if in a prop I pass something different than a state, it does not provoke a render, even if the prop has changed in the time.

In this code I pass a prop without using a state

parent

import React from "react";
import Child from "./child";

export default function Parent() {
  let count = 0;

  setInterval(() => {
    count++;
    console.log(count);
  }, 1000);

  return <Child count={count} />;
}

child

import React from "react";

export default function Child(props) {
  console.log("render from child");        //console.log once

  return <h1>{props.count}</h1>;
}

thanks for helping me with this mess in my mind

If you change a prop passed to a component, the component will re-render. Why do you think that it won't re-render? — Jagrati, May 02 '20 at 18:11
It's highly difficult to understand what you are asking. Consider improving your question. — kind user, May 02 '20 at 18:11
In your example: you have used a normal variable as compared to a state, that is the reason you log it only once. Normal variables dont force re-render. — muditrustagii, Sep 17 '21 at 10:18

Suraj Auwal · Answer 1 · 2020-05-14T05:27:31.863

A few days ago, I was teaching a junior of mine memoization in react and I came up with a descriptive way to show how re-rendering works.

Let's create a component a counter component


const Counter = () => {

const [count, setCount] = React.useState(0)


const increment = () => setCount(count +1)

console.log("render from counter")

return (
      <>
          <h1> Counter: {count} </h1>
          <button onClick={increment}>Add count</button>
     </>

}

So basically, I have a counter component that will increment our count Everytime the button is clicked.

But also notice the console log there. Everytime I click on the button it will change the state which will make the component to re render, thus executing the console.log function.

Now we know that a component re renders whenever a state has changed, but it can also re render when it's props changes.

Let me show you what I mean.


const Counter = () => {

const [count, setCount] = React.useState(0)


const increment = () => setCount(count +1)

console.log("render from counter")

return (
      <>
          <h1> Counter: {count} </h1>
          <button onClick={increment}>Add count</button>
         <ChildCounter count={count} />
     </>

}


// Child component
const ChildCounter = ({count}) => {

console.log("render from child")

return (
      <>
          <h1> our counter is now at : {count} </h1>
     </>

}

Here I have another component that is a child of the counter component. And i am passing count as a prop to the child component.

Everytime the count changes in the parent component (ie. Counter), the child will re render.

That's because of two things. One is the props has changed and secondly is because the parent component will force its child to re render when it re renders.

Now you see that re rendering in react occurs when state has change, props change and parent change.

We can stop a child from unnecessary re renders using memorization which I won't be talking about here.

I hope this will help.

Excuse my lack of indentation and the ugly as* looking code in general.

Thank you very much Siradji, your explanation was amazing and very clear about the topic, but it wasn't exactly what I was looking for, my question was confuse, so I edited it, my fault, I know, I hope that you can understand it now, thank very much Siradji! — rafs2459, May 02 '20 at 20:59

In React, why doesn't changing non-state props prompt rerenders?

1 Answers1