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