##### 🚀 Optimizing Component Renders in React If you have the React DevTools extension installed for Chrome or Firefox, navigate to the **Components** tab, click the **Settings (gear icon)**, and go to **General**. In this menu, check the box that says **"Highlight updates when components render."** ![Chrome Browser React Extension Settings](//images.ctfassets.net/h4xhjdvwsvf7/5PVtaLzKaLAEJOsZ2DqL8k/1c2f6935f1377cafc92c6217a79acc64/chrome-react-extension-settings.png) Once enabled, head over to your app. You'll be able to see exactly which components are firing off renders by watching for the green borders that flash momentarily around components on the page: React does an incredible job behind the scenes preparing for screen repaints using a VDOM (Virtual DOM). For the most part, you don't have to do anything because React's reconciliation process minimizes native DOM updates as much as possible. If you need an introduction to how React components work under the hood, check out the [Official React Documentation](https://react.dev) Take a look at this React JSX for a simple form setup: ```jsx const InputComponent = ({value}) => { return ; }; const ButtonComponent = ({onClick, btnText}) => { return ; }; const App = () => { const [text, setText] = useState(''); const onClick = () => { setText(''); }; return (

); }; ``` Under the hood, React compiles that JSX down into a tree of plain JavaScript objects. That virtual representation looks something like this: ```javascript const appElement = { type: 'div', props: { children: [ { type: InputComponent, props: { value: '' }, }, { type: ButtonComponent, props: { btnText: 'Clear text', onClick: handleClear, }, }, ], }, }; ``` --- ##### We Don't Always Need to Optimize Because React's default behavior is so fast, you usually don't need to manually optimize performance. However, you will occasionally run into instances where unnecessary, expensive re-renders occur. When those bottlenecks happen, you have a few specialized tools at your disposal. __Use React.memo__ React.memo is a higher-order component that can help reduce unnecessary renders by memoizing the result. To see why we need it, let's look at a scenario where a child component re-renders completely unnecessarily: ```jsx import React, { useState } from 'react'; // This component doesn't care about the text state in App const Counter = () => { const [count, setCount] = useState(0); return (

Count: {count}

); }; const App = () => { const [text, setText] = useState(''); const handleSetText = (e) => { setText(e.target.value); }; return (

); }; export default App; ``` In this setup, we have a text input changing the text state in the parent App component, and a Counter child component managing its own count state. Whenever a user types in the input, the App component's state updates, forcing App to re-render. Because Counter is a child element inside App, it gets swept up in that re-render loop even though nothing inside Counter has changed! We can track exactly how often this happens by adding a useRef hook to act as a render counter ```jsx import React, { useState, useRef } from 'react'; const Counter = () => { const [count, setCount] = useState(0); const renders = useRef(0); renders.current++; // Track every single render pass return (

Renders: {renders.current}

Count: {count}

); }; ``` If you type a long sentence into that input, you'll see the render count skyrocket on every single keystroke. This is where React.memo comes to the rescue. By wrapping our component with it, React will shallowly compare the component's incoming props. If the props haven't changed since the last render, React will skip rendering it entirely and reuse the last rendered result: ```jsx import React, { useState, useRef } from 'react'; // Wrapped in React.memo to prevent parent-driven re-renders const Counter = React.memo(() => { const [count, setCount] = useState(0); const renders = useRef(0); renders.current++; return (

Renders: {renders.current}

Count: {count}

); }); ``` And there it is! Notice how the render count stays totally still when we type into the text field. The Counter component is safely isolated from the parent's typing state updates. --- ##### Key Takeaways - React DevTools is your best friend for spotting exactly when and where component updates are firing. - React is super efficient out of the box, so avoid pre-optimizing your components until you notice actual UI lag - When parent updates trigger expensive UI performance drops, use React.memo to guard pure child components from unnecessary rendering cycles

Optimizing Renders in React

Ryan Santos

Let's Connect