Как сделаешь композицию компонента с логикой рендера и запросов с Backend

Используем паттерн **Render Props** или **HOC** для разделения логики и представления. Пример с Render Props: ```jsx const DataFetcher = ({ url, children }) => { const [data, setData] = useState(null); const [loading, setLoading] = useState(false); useEffect(() => { setLoading(true); fetch(url) .then(res => res.json()) .then(data => { setData(data); setLoading(false); }); }, [url]); return children({ data, loading }); }; // Использование {({ data, loading }) => loading ? : } ``` Или через HOC: ```jsx const withData = (url, WrappedComponent) => { return (props) => { // та же логика запроса return ; }; }; ``` Преимущества: - Разделение ответственности - Переиспользование логики - Гибкость в рендеринге