Understanding React Rendering and Re-rendering

React is a powerful JavaScript library for building user interfaces, but understanding its rendering behavior can be challenging, especially when using React Hooks. In this blog post, we’ll dive deep into how React decides when to re-render components and why grasping this process is crucial for creating performant applications with a great user experience.

What is Rendering in React?

At its core, rendering in React is the process of creating a virtual representation of your user interface based on the current state and props of your components. This virtual representation, known as the Virtual DOM, is then compared with the actual DOM to determine what changes need to be made.

The React Rendering Process

Let’s break down the step-by-step process of how React renders components when using Hooks:

Initial Render: When your application first loads, React constructs the initial Virtual DOM tree based on the initial state and props of your components.
State:When the state of a component changes, React generates a new Virtual DOM tree. This new tree represents the updated UI based on the new state and props. However, it’s important to note that React will only re-render a component if the props or state have changed since the last render.
Diffing: React compares the new Virtual DOM tree with the previous one through a process called “diffing”. During this process, React identifies the differences between the two trees and determines which parts of the UI need to be updated.
Reconciliation: After identifying the necessary changes, React applies them to the actual DOM. This process is known as reconciliation. React intelligently updates only the parts of the DOM that have changed, minimizing the performance impact of re-rendering.

Why Does React Re-render?

React re-renders components whenever it detects changes in their state or props. This is a fundamental concept in React and is essential for keeping the UI in sync with the underlying data.

Here are a few common reasons why a component might re-render:

State Changes: When you update the state of a component using the useState hook, React will re-render that component and its child components. When a component’s state changes using setState or the state updater function from useState, React schedules a re-render.

const [count, setCount] = useState(0)

// This will trigger a re-render
const handleClick = () => {
  setCount(count + 1)
}

Props Changes: If a parent component passes new props to its child components, those child components will re-render to reflect the updated props.
Parent Component Re-renders: When a parent component re-renders, all of its child components will also re-render, even if their props haven’t changed. This is because React assumes that the child components might depend on the parent’s state or props. When a parent component re-renders, by default, all child components will re-render regardless of whether their props have changed.

function Parent() {
  const [count, setCount] = useState(0)

  return (
    <div>
      <button onClick={() => setCount(count + 1)}>Increment</button>
      <Child />
    </div>
  )
}

The <Child/> component will re-render since the parent component re-renders when the count state updates by clicking the increment button. When a parent component re-renders, React will re-render all of its children by default, creating a cascading effect down the component tree.

Context Changes: When using React.Context and consuming the context value with the useContext hook, components that consume the context will re-render whenever the context value changes. However, components that are wrapped within the Context.Provider but do not consume the context value using useContext will not re-render. This is a common misconception that all components wrapped in the Context.Provider will re-render.

const AppContext = createContext<null | { on: boolean; toggle: () => void }>(
  null
);

function AppProvider(props: PropsWithChildren) {
  const [state, setState] = useState(false);
  return (
    <AppContext.Provider
      value={{ on: state, toggle: () => setState((p) => !p) }}
    >
      {props.children}
    </AppContext.Provider>
  );
}

function useAppContext() {
  const context = useContext(AppContext);
  if (!context)
    throw new Error("AppContext must be used within an AppProvider");
  return context;
}

function App() {
  return (
    <AppProvider>
      <main>
        <Title />
        <ButtonComponent />
        <P />
      </main>
    </AppProvider>
  );
}

// Will re-render
function ButtonComponent() {
  const { toggle } = useAppContext();
  return <button onClick={toggle}>toggle</button>;
}

// Will re-render
function Title() {
  const { on } = useAppContext();
  return <h1>App Title, state is {on ? "on" : "off"} </h1>;
}

// Will not re-render
function P() {
  return (
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia omnis aut
      quod ad hic expedita at ducimus, minus voluptatem accusantium repudiandae
      soluta molestiae quos tenetur ut! Laudantium vel dolor accusantium!
    </p>
  );
}

In this example, both ButtonComponent and Title will re-render since they are consuming the context value via the useAppContext hook. However, the P component will not re-render because it does not consume the context value.

Optimizing Re-renders

While React’s re-rendering process is generally efficient, there are cases where unnecessary re-renders can occur, leading to performance issues. Here are a few techniques to optimize re-renders when using Hooks:

React.memo: This is a higher-order component that memoizes the result of a functional component. It only re-renders if the props have changed, avoiding unnecessary re-renders. You can wrap your functional components with React.memo to optimize their rendering behavior.

const MyComponent = React.memo(function MyComponent(props) {
  // Component logic and JSX
})

useCallback and useMemo: These hooks allow you to memoize callback functions and computed values, respectively. By memoizing them, you can prevent unnecessary re-renders of child components that depend on them. Use useCallback for memoizing callback functions and useMemo for memoizing computed values.

const memoizedCallback = useCallback(() => {
  // Callback logic
}, [dependencies])

const memoizedValue = useMemo(() => {
  // Compute expensive value
}, [dependencies])

useEffect: The useEffect hook allows you to perform side effects in functional components. By carefully specifying the dependencies array, you can control when the effect should run and avoid unnecessary re-renders.

useEffect(() => {
  // Side effect logic
}, [dependencies])

Props.children: When a component receives children as a prop, it can be optimized by memoizing the children prop using React.memo. This prevents unnecessary re-renders of the child components when the parent component re-renders.

const MemoizedChild = React.memo(function MemoizedChild({children}) {
  return <div>{children}</div>
})

function Parent() {
  return <MemoizedChild>{/* Child components */}</MemoizedChild>
}

Avoid Inline Functions: Inline functions defined within a component’s render method will be recreated on every render, causing unnecessary re-renders of child components that depend on them. Instead, define functions outside the component or use useCallback to memoize them.
Avoid Object/Array Literals: Similar to inline functions, object and array literals created within a component’s render method will be recreated on every render. This can lead to unnecessary re-renders of child components that rely on reference equality. Instead, memoize these values using useMemo or move them outside the component.

Debugging and Checking Re-renders in React Components

Now that we know how to optimize our React code, it’s important to use tools that help us identify components needing improvement. When working with React components, having the right tools and techniques to debug and identify potential performance issues related to re-renders is essential. Here are some common methods to debug your React components and check for re-renders:

React Developer Tools: The React Developer Tools browser extension is a powerful tool for debugging React components. It allows you to inspect the component hierarchy, view component props and state, and monitor component updates. You can also use the “Highlight Updates” feature to visually see which components are re-rendering.
Console Logging: One of the simplest ways to debug and track re-renders is by using console logging. You can add console.log statements within your component’s render method or lifecycle methods to log relevant information and track when the component re-renders.

function MyComponent() {
  console.log("MyComponent rendered")
  // Component logic
}

Performance Profiling: React provides a built-in profiler that allows you to measure the performance of your components. You can use the React.Profiler component to wrap the components you want to profile and collect timing information about their rendering. This helps identify components that may be causing performance bottlenecks.

import React, {Profiler} from "react"

function App() {
  return (
    <Profiler
      id="App"
      onRender={(id, phase, actualDuration) => {
        console.log(`${id} rendered in ${actualDuration}ms`)
      }}
    >
      {/* Components to profile */}
    </Profiler>
  )
}

React DevTools Profiler: The React Developer Tools also include a profiler that provides a visual representation of your component’s rendering performance. It shows a flame chart of the component tree and highlights the components that took the most time to render. This can help identify performance bottlenecks and optimize your components accordingly.

Conclusion

Understanding React’s rendering and re-rendering process is crucial for building efficient and performant applications, especially when using React Hooks. By knowing when and why components re-render, you can make informed decisions about optimizing your components and minimizing unnecessary re-renders.

Debugging and optimizing re-renders in React components is an essential part of building performant applications. By utilizing tools like React Developer Tools, profiling techniques, and optimization techniques such as React.memo, useCallback, useMemo, and useEffect, you can identify and resolve performance issues related to unnecessary re-renders.

Remember to start with a solid understanding of React’s rendering behavior and apply optimization techniques judiciously. Premature optimization can sometimes lead to more complex code and may not always yield significant performance improvements. It’s important to profile your application, identify actual performance bottlenecks, and optimize based on real-world scenarios.

By combining effective debugging techniques with a focus on writing clean and maintainable code, you can create React applications that are both performant and developer-friendly. Happy coding and optimizing!

Marcell CD