javascript / beginner
Snippet
Skipping Child Re-renders with React.memo
React components re-render whenever their parent re-renders by default. Wrapping a functional component in React.memo performs a shallow comparison of its props, skipping unnecessary renders when props have not changed and improving render performance.
snippet.js
javascript
1
2
3
4
5
6
7
import React from 'react';function UserBadge({ username }) {return <div className="user-badge">User: {username}</div>;}export default React.memo(UserBadge);
react
Breakdown
1
function UserBadge({ username }) {
Declares a presentational component that accepts a username prop.
2
export default React.memo(UserBadge);
Wraps UserBadge in a higher-order component that memoizes its render output based on prop equality.