JAVASCRIPT

react useMemo to render a list

import { useMemo } from 'react';

export default function App() {
  const list = [
    { key: 1, value: 10 },
    { key: 2, value: 20 },
    { key: 3, value: 30 }
  ];

  const renderedList = useMemo(() => (
    list.map(({ key, value }) => (
        <div key={key}>
            {value}
        </div>
    ))
  ), [list]);

  return (
    <div>
        {renderedList}
    </div>
  );
}
COPY