React Interview Questions

Preventing unnecessary re-renders in React components can significantly improve the performance of your application. Here are some strategies to prevent or minimize re-renders in React components:

1. Use React.memo

React.memo is a higher-order component that memoizes the component. It prevents re-renders if the props haven't changed by performing a shallow comparison of the props.

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

2. Use useCallback and useMemo

• useCallback: Memoizes callback functions, preventing them from being recreated on every render.
• useMemo: Memoizes the result of a function, preventing expensive computations on every render.

const MyComponent = ({ value, onClick }) => {
  const memoizedCallback = useCallback(() => {
    onClick(value);
  }, [value, onClick]);

  return <button onClick={memoizedCallback}>Click me</button>;
};

const ParentComponent = () => {
  const [value, setValue] = useState(0);
  const handleClick = (val) => {
    console.log(val);
  };

  return <MyComponent value={value} onClick={handleClick} />;
};

3. Avoid Inline Functions in render

Creating inline functions inside the render method causes a new function to be created on every render, which can trigger re-renders of child components.

// Bad: Inline function in render
const ParentComponent = () => {
  const [value, setValue] = useState(0);

  return <ChildComponent onClick={() => setValue(value + 1)} />;
};

// Good: Use useCallback or define outside render
const ParentComponent = () => {
  const [value, setValue] = useState(0);
  const handleClick = useCallback(() => {
    setValue(value + 1);
  }, [value]);

  return <ChildComponent onClick={handleClick} />;
};

4. Use shouldComponentUpdate or React.PureComponent

For class components, you can use shouldComponentUpdate to control whether a component should re-render. Alternatively, extend React.PureComponent, which implements shouldComponentUpdate with a shallow prop and state comparison.

class MyComponent extends React.PureComponent {
  render() {
    return <div>{this.props.value}</div>;
  }
}

// Or manually implement shouldComponentUpdate
class MyComponent extends React.Component {
  shouldComponentUpdate(nextProps) {
    return nextProps.value !== this.props.value;
  }

  render() {
    return <div>{this.props.value}</div>;
  }
}

5. Optimize Context Usage

Using context can lead to re-renders if not used carefully. Only wrap the components that need the context in the context provider to avoid unnecessary re-renders.

const MyContext = React.createContext();

const ProviderComponent = ({ children }) => {
  const [value, setValue] = useState(0);

  return (
    <MyContext.Provider value={value}>
      {children}
    </MyContext.Provider>
  );
};

// Consume context only where needed
const MyComponent = () => {
  const value = useContext(MyContext);

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

6. Use Immutable Data Structures

Using immutable data structures helps in optimizing re-renders because it allows for easier and more accurate comparison of old and new states.

const [state, setState] = useState({ items: [] });

// When updating state, create a new object instead of mutating the old one
const addItem = (item) => {
  setState((prevState) => ({
    ...prevState,
    items: [...prevState.items, item],
  }));
};

7. Optimize List Rendering

For lists, use techniques like React.memo for list items, key props for list items, and libraries like react-window or react-virtualized for large lists.

const ListItem = React.memo(({ item }) => <div>{item}</div>);

const List = ({ items }) => {
  return items.map((item, index) => <ListItem key={index} item={item} />);
};

Conclusion

By implementing these strategies, you can effectively prevent unnecessary re-renders in your React components, leading to better performance and a smoother user experience. Understanding when and how to apply these techniques will help you optimize your React applications and keep them running efficiently.