Discussion on: Avoid This Common React Hook Antipattern

[Rense Bakker]

Indeed! But keep in mind that for more complex derived state, you should use the useMemo hook, to prevent slow rendering.

import React from 'react';

type Person = {
  name: string
  isDev: boolean
}

function MyComponent({ people }: { people: Person[] }) {
  const devs = React.useMemo(() => people.filter(person => person.isDev), [people]);

  return (
    <span>{devs.map(dev => dev.name).join()}</span>
  );
}