On React, how can I call a function on component mount on a functional/stateless component?

Question

I have this functional/stateless component where I have a function filterByCardinalPoint which I need to call when component is mounted. Is there a way to do that without writing the component as a class?

const PassengersCircle = ({ navigationStore, passengersData }) => {
  const filterByCardinalPoint = () => {
    const passengersByCardinalPoint = filter('value');
    ...
  };

  return (...)
};

Answer 1

You can use the useEffect hook to run a function when the component has been mounted. By giving it an empty array as second argument it will only be run after the initial render.

const PassengersCircle = ({ navigationStore, passengersData }) => {
  const filterByCardinalPoint = () => {
    const passengersByCardinalPoint = filter('value');
    // ...
  };

  useEffect(() => {
    filterByCardinalPoint();
  }, []);

  return <>{/* ... */}</>;
};