react memo

1const FancyButton = React.forwardRef((props, ref) => (
2  <button ref={ref} className="FancyButton">
3    {props.children}
4  </button>
5));
6
7// You can now get a ref directly to the DOM button:
8const ref = React.createRef();
9<FancyButton ref={ref}>Click me!</FancyButton>;

1function MyComponent(props) {
2  /* render using props */
3}
4function areEqual(prevProps, nextProps) {
5  /*
6  return true if passing nextProps to render would return
7  the same result as passing prevProps to render,
8  otherwise return false
9  */
10}
11export default React.memo(MyComponent, areEqual);

1//Below I use the React.createElement() function to create a virtual DOM
2//representation of a <li> element node containing a text node of one (a.k.a.,
3//React text) and an id of li1.
4
5var reactNodeLi = React.createElement('li', {id:'li1'}, 'one');
6
7

1/* this is for es6 onward */
2/* React.memo is the new PureComponent */
3
4import React, { memo } from 'react'
5
6const MyComponent = () => {
7 return <>something</>
8}
9
10export default memo(MyComponent)

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

1export const MemoMainPostTopic = React.memo(MainPostTopic);
2 
3
4//or
5
6const MainPostTopic = memo(() => {
7 ...
8})
9export { MainPostTopic };