import React from 'react'; // A functional component that takes a prop and renders it. const MyComponent = ({ value }) => { console.log('Rendering MyComponent'); return <div>{value}</div>; }; // Wrap MyComponent with React.memo to optimize rendering. const MemoizedMyComponent = React.memo(MyComponent); // In your parent component's render method: function ParentComponent() { const someValue = 'Hello, React!'; return ( <div> {/* Render the memoized component */} <MemoizedMyComponent value={someValue} /> </div> ); }
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter