react.memo? code example

Example 1: react forwardref

const FancyButton = React.forwardRef((props, ref) => (
  <button ref={ref} className="FancyButton">
    {props.children}
  </button>
));

// You can now get a ref directly to the DOM button:
const ref = React.createRef();
<FancyButton ref={ref}>Click me!</FancyButton>;

Example 2: react memo

function MyComponent(props) {
  /* render using props */
}
function areEqual(prevProps, nextProps) {
  /*
  return true if passing nextProps to render would return
  the same result as passing prevProps to render,
  otherwise return false
  */
}
export default React.memo(MyComponent, areEqual);

Example 3: react.createElement

//Below I use the React.createElement() function to create a virtual DOM
//representation of a <li> element node containing a text node of one (a.k.a.,
//React text) and an id of li1.

var reactNodeLi = React.createElement('li', {id:'li1'}, 'one');

Example 4: import React, { memo } from 'react';

const MyComponent = React.memo(function MyComponent(props) {
  /* only rerenders if props change */
});

Example 5: react memo

/* this is for es6 onward */
/* React.memo is the new PureComponent */

import React, { memo } from 'react'

const MyComponent = () => {
 return <>something</>
}

export default memo(MyComponent)

Example 6: how to add react.memo in export list

export const MemoMainPostTopic = React.memo(MainPostTopic);
 

//or

const MainPostTopic = memo(() => {
 ...
})
export { MainPostTopic };