Snippet

Preventing Redundant Child Renders with React.memo

By default, React child components re-render whenever their parent updates. Wrapping a component in React.memo optimizes performance by performing shallow prop comparisons and skipping render when props are unchanged.

snippet.js

javascript

import React from 'react';
 
export const StatusBadge = React.memo(function StatusBadge({ count }) {
  return <span className="badge">Count: {count}</span>;
});

react

Breakdown

export const StatusBadge = React.memo(function StatusBadge({ count }) {

Wraps the component in a higher-order component that memoizes the rendered output.

return <span className="badge">Count: {count}</span>;

Renders the badge markup, recalculating only when the count prop changes value.

Previous snippet Next snippet

More Beginner JavaScript exercises →

Preventing Redundant Child Renders with React.memo

Related