Javascript Programming Tutorials, Guides & Best Practices

React.memo is a higher-order component that prevents functional components from re-rendering if their props haven't changed. It performs a shallow comparison of props and reuses the previous render result when possible.([JavaScript in Plain English][3])

Example:

import React from 'react';
import { FixedSizeList as List } from 'react-window';

const Row = ({ index, style }) => (
  <div style={style}>Row {index}</div>
);

function MyList({ itemCount }) {
  return (
    <List
      height={400}
      itemCount={itemCount}
      itemSize={35}
      width={300}
    >
      {Row}
    </List>
  );
}

export default MyList;

This approach drastically reduces the number of rendered DOM nodes, improving performance when dealing with large datasets.