When to Keep Things in the Component

• If the logic is tightly coupled with the component's rendering logic and does not need to be reused.
• Simple state management or effects directly related to the component.

When to Move Things Out

• Utility Functions: Move out pure functions that are reusable across different components.

Example:

// calculateTotal.ts
export const calculateTotal = (items: Item[]): number => {
  return items.reduce((acc, item) => acc + item.price, 0);
};

• Custom Hooks: Move out reusable hooks logic that involves state or side effects.

Example:

// useFetchData.ts
import { useState, useEffect } from 'react';

export const useFetchData = (url: string) => {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch(url)
      .then(response => response.json())
      .then(data => setData(data));
  }, [url]);

  return data;
};