javascript / beginner
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
1
2
3
4
5
import React from 'react';export const StatusBadge = React.memo(function StatusBadge({ count }) {return <span className="badge">Count: {count}</span>;});
react
Breakdown
1
export const StatusBadge = React.memo(function StatusBadge({ count }) {
Wraps the component in a higher-order component that memoizes the rendered output.
2
return <span className="badge">Count: {count}</span>;
Renders the badge markup, recalculating only when the count prop changes value.