use memo react code example

Example 1: 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 2: how to use react memo hooks

function moviePropsAreEqual(prevMovie, nextMovie) {
  return prevMovie.title === nextMovie.title
    && prevMovie.releaseDate === nextMovie.releaseDate;
}

const MemoizedMovie2 = React.memo(Movie, moviePropsAreEqual);

Example 3: how to use react memo hooks

const computeLetterCount = word => {
    let i = 0;
    while (i < 1000000000) i++;
    return word.length;
  };

  // Memoize computeLetterCount so it uses cached return value if input array ...
  // ... values are the same as last time the function was run.
  const letterCount = useMemo(() => computeLetterCount(word), [word]);

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

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

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

export const MemoMainPostTopic = React.memo(MainPostTopic);
 

//or

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