Blog

Best Practices and Key Scenarios for React Re-Rendering

Here in this blog, we will learn about the best practices and key scenarios for React Re-Rendering.

React is a powerful JavaScript library for building user interfaces, known for its efficiency and declarative nature. One of the core features of React is its ability to re-render components efficiently when data changes. Understanding the different scenarios that trigger re-renders is crucial for optimizing performance and ensuring a smooth user experience.

1. State Changes

A change in component state is one of the most common triggers for re-rendering in React. When you update a state using the `setState` function in class components or the `useState` hook in functional components, React will re-render the component to reflect the new state.

const [count, setCount] = useState(0);
function increment() {
  setCount(count + 1); // This triggers a re-render
}

2. Props Changes

Components also re-render when their props change. This includes both direct changes to the props and changes to the objects or arrays passed as props. When a parent component re-renders and passes new props to a child component, the child will re-render to reflect those new props.

function ChildComponent({ value }) {
  return <div>{value}</div>;
}
function ParentComponent() {
  const [parentValue, setParentValue] = useState(0);
  return <ChildComponent value={parentValue} />;
}

 3. Context Updates

React’s Context API allows for global state management across the component tree. When the value provided by a context changes, all components consuming that context will re-render.

const MyContext = React.createContext();
function ParentComponent() {
  const [value, setValue] = useState(0);
  return (
    <MyContext.Provider value={value}>
      <ChildComponent />
    </MyContext.Provider>
  );

}

function ChildComponent() {

  const contextValue = useContext(MyContext);

  return <div>{contextValue}</div>;

}

 4. Parent Component Re-renders

Even if a child component’s props and state have not changed, it will still re-render if its parent component re-renders. This is because React traverses the component tree and re-renders children of the re-rendered parent.

function ChildComponent() {
  console.log('Child render');
  return <div>Child</div>;
}
function ParentComponent() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <ChildComponent />
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>

  );

}

5. Force Updates

Sometimes, you may need to force a re-render even if there are no changes in state or props. React provides methods like `forceUpdate` in class components for this purpose, though this should be used sparingly.

class MyComponent extends React.Component {
  forceUpdateHandler() {
    this.forceUpdate();
  }
  render() {
    return <button onClick={() => this.forceUpdateHandler()}>Force Update</button>;
  }
}

Optimizing Re-renders

While React’s reconciliation algorithm is optimized to minimize re-renders, unnecessary re-renders can still occur and affect performance. Here are some strategies to optimize re-rendering:

•  Memoization: Use `React.memo` for functional components and `PureComponent` for class components to prevent unnecessary re-renders when props have not changed.

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

• useMemo and useCallback: Use these hooks to memoize values and functions, preventing unnecessary recalculations and re-renders.

  const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);
  const memoizedCallback = useCallback(() => {
    doSomething(a, b);
  }, [a, b]);

• Avoid Anonymous Functions in JSX: Passing anonymous functions directly in JSX can cause re-renders. Instead, define them outside the JSX return statement or use `use callback`.

  function ParentComponent() {
    const handleClick = useCallback(() => {
      console.log('Clicked');
    }, []);
    return <button onClick={handleClick}>Click me</button>;
  }

Understanding these scenarios and implementing optimization techniques can help you build efficient React applications with smooth and responsive user interfaces.