CODEWITHSUNDEEP
reactjs
Claude
Claude

Reputation: 391

how is react faster and more efficient when it ran js code unnecessarily

I am horrified to see my code running multiple time to render/update one UI. I have a component that accepts a new props id to be used for API call. When a component receives props. it ran render unnecessarily, I use componentDidUpdate to call API it ran render the second time. Doesn't this make your program slower? Or am I structuring my react app incorrectly and don't understand react at all.

Also I had a setState to allow conditional rendering, so its render - when it receives id props render - when I setState to loading render - when I toggle setState to show API result

So its 3 render for 1 UI change.

Upvotes: 0

Views: 363

Answers (2)

Nagarjuna
Nagarjuna

Reputation: 61

React uses virtual DOM to modify the DOM element and does dirty checking of its virtual DOM objects to actual DOM objects. If your render method is calling multiple times, you need to check how well you are using state and props and life cycle components.

Upvotes: 0

Varun Sharma
Varun Sharma

Reputation: 288

React uses Virtual DOM and a diffing algorithm to update the real DOM so the real DOM is not changed on every render. Only the parts which actually change are updated hence the performance and efficiency is one of the best.

Upvotes: 1

Related Questions