Хук useMemo

Мемоізація це метод оптимізації комп'ютерних програм шляхом збереження результатів викликів функції та повернення кешованого результату при повторенні тих самих вхідних даних. Мемоізована функція «запам'ятовує» результат обчислень відповідний набору аргументів. Наступні виклики з такими самими значеннями аргументів повертають запам'ятаний результат, а не перераховують його.

Хук useMemo приймає два аругменти:

• Першим є анонімна функція, яка повертає значення, саме вона буде мемоізована.
• Другим є масив залежностей, при зміні якоїсь з них, викликається функція передана першим аргументом.

const memoizedValue = useMemo(() => {
  return a + b;
}, [a, b]);

const App = () => {
  const [planets, setPlanets] = useState(["Earth", "Mars", "Jupiter", "Venus"]);
  const [query, setQuery] = useState("");

  const filteredPlanets = planets.filter(planet => planet.includes(query));

  return (
    <ul>
      {filteredPlanets.map(planet => (
        <li key={planet}>{planet}</li>
      ))}
    </ul>
  );
};