Preview:
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>
  );
}
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