React Hooks Solution #EarlyReturn

example.tsx

const MyComponent: React.FC = () => {
  const data1 = useData1();
  const data2 = useData2(data1);
  const result = React.useMemo(() => {
    if (!data1 || !data2) {
      return null;
    }

    return aggregateData(data1, data2);
  }, [data1, data2]);

  if (!result) {
    return null;
  }

  return <ResultDisplay result={result} />;
};

// Add null check for data1 inside useData2
function useData2(data1) {
  if (!data1) {
    return null;
  }
  return getData2(data1.id);
}