vzaidman

const Main = React.memo(({onClick, style, children, items}) => {
  const content = getContent({items});
  return (
    <div style={style} onClick={onClick}>
      {content}
      {children}
    </div>
  );
})

vzaidman

export default function App(props) {
  return React.createElement(
    "div",
    {className: "App"},
    React.createElement(Header, null),
    React.createElement(Main, {userName: props.userName})
  );
}

vzaidman

const Main = React.memo(({onClick, style, children, items}) => {
  const content = getContent({items});
  return (
    <div style={style} onClick={onClick}>
      {content}
      {children}
    </div>
  );
})

vzaidman

const Main = ({userName}) => {
  const content = heavyCalculation({userName});
  return (
    <div className="Main">
      {content}
    </div>
  );
}

export default function App({userName}) {

vzaidman

const SomeReactElement = <SomeReactComponent/>
// equivalent to:
const SomeReactElement = React.createElement(SomeReactComponent)

vzaidman

/*
    Notice: This hook would be problematic in concurrent mode:
    https://reactjs.org/docs/hooks-faq.html#how-to-read-an-often-changing-value-from-usecallback
*/
function useEventCallback(fn, dependencies) {
  const ref = React.useRef(() => {
    throw new Error('Cannot call an event handler while rendering.');
  });
  React.useEffect(() => {
    ref.current = fn;

vzaidman

const PureHeavyComponent = React.memo(({onClick}) => {
  console.log('pure heavy component!');
  return (
    <div onClick={onClick}>
     //Many Other React elements are created here
    </div>
  );
});

class Parent extends React.Component {

vzaidman

const PureHeavyComponent = React.memo(({onClick}) => {
  console.log('pure heavy component!');
  return (
    <div onClick={onClick}>
     //Many Other React elements are created here
    </div>
  );
});

const Parent = () => {

vzaidman

const PureHeavyComponent = React.memo(({onClick}) => {
  console.log('pure heavy component!');
  return (
    <div onClick={onClick}>
     //Many Other React elements are created here
    </div>
  );
});

const Parent = () => {

vzaidman

const PureHeavyComponent = React.memo(({onClick}) => {
  console.log('pure heavy component!');
  return (
    <div onClick={onClick}>
     //Many Other React elements are created here
    </div>
  );
});

const Parent = () => {