CODEWITHSUNDEEP
reactjs
evolon
evolon

Reputation: 1596

How React render behaves for change in props

Let's say that we have a component like this:

const MyComponent = ({height, children}) => (
  <div style={{ height }}>{children}</div>
)

Now, when the height prop is changed, does React re-renders the whole component or only the height of the already rendered div will be changed?

Upvotes: 0

Views: 33

Answers (2)

Dmitriy Nevzorov
Dmitriy Nevzorov

Reputation: 6078

React has a “diffing” algorithm usually cold reconciliation so that component updates are predictable while being fast enough for high-performance apps.

When you use React, at a single point in time you can think of the render() function as creating a tree of React elements. On the next state or props update, that render() function will return a different tree of React elements. React then needs to figure out how to efficiently update the UI to match the most recent tree.

When diffing two trees, React first compares the two root elements. The behavior is different depending on the types of the root elements.

When comparing two React DOM elements of the same type, React looks at the attributes of both, keeps the same underlying DOM node, and only updates the changed attributes.

There is an article in the official documentation that explains how it works in details

Upvotes: 1

Shubham Khatri
Shubham Khatri

Reputation: 282140

React works on the principle of Virtual DOM and when you change any of the properties that affect the virtual DOM, react compares the newly created virtual DOM with the one that it rendered previously and decide what changes it needs to make.

Since in this case only the height property is changed, React will update that within the original DOM and not re-render and change any of the other DOM elements

Upvotes: 1

Related Questions