Prevent re-render when sending function prop from functional component

useCallback hook exists exactly to solve this problem. I advise you to carefully read the official guide to hooks, it pretty much answers all possible questions

  function Component(props) {
    const createRows = useCallback(() =>
      props.data.map(dataToRow);
    ), []); // provide dependencies here

    return <List createRows={createRows}/>;
  }

This is the purpose of useCallback. You can find more details in some of my related answers below.

Trouble with simple example of React Hooks useCallback

What is the intension of using React's useCallback hook in place of useEffect?

React Hooks useCallback causes child to re-render