Контейнеры знают как всё работает, презентационные компоненты знают как всё должно выглядеть

function FocusInput() {
  const inputRef = useRef(null); // Создаем реф
  
  const handleFocus = () => {
    inputRef.current.focus(); // Устанавливаем фокус на элемент
  };
  
  return (
    <div>
      <input ref={inputRef} type="text" placeholder="Введите текст" />
      <button onClick={handleFocus}>Установить фокус</button>
    </div>
  );
}

Вы можете использовать useRef для управления фокусом не только на текстовых полях, но и на других элементах, таких как кнопки или контейнеры.

- Изменение состояния родительского компонента
- Условная отрисовка
- Переход на другую страницу
- Прямое удаление компонента

useEffect(() => {
  const handleResize = () => console.log('Окно изменилось');
  
  window.addEventListener('resize', handleResize);
  return () => window.removeEventListener('resize', handleResize);
}, []);

useEffect(() => {
  const unsubscribe = eventSource.on('message', handleMessage);
  return () => unsubscribe();
}, []);

const handleClick = () => console.log('Нажато!');
return <button onClick={handleClick}>Кнопка</button>;

1. Забыл отписаться - память засоряется, могут быть баги
2. Отписался неправильно - передал другую функцию вместо той же самой
3. Использовал useEffect для React-событий - не нужно, React сам справится

Даже если дочернему компоненту не передаются props, он всё равно перерендерится при обновлении родителя! Это поведение React по умолчанию.

function counterReducer(state, action) {
  switch (action.type) {
    case 'increment': return { count: state.count + 1 };
    case 'decrement': return { count: state.count - 1 };
    default: return state;
  }
}

const [state, dispatch] = useReducer(counterReducer, { count: 0 });

- 1 поле → useState
- Несколько связанных полей → useReducer
- Данные нужны везде → Redux

// Плохо: состояние сбрасывается
{items.map(item => (
  <input key={Math.random()} defaultValue={item.value} />
))}

// Правильно: key стабильны
{items.map(item => (
  <input key={item.id} defaultValue={item.value} />
))}

function MyComponent() {
    const inputRef = useRef(null);
    
    const focusInput = () => {
        inputRef.current.focus();
    };
    
    return <input ref={inputRef} />;
}

function MyComponent() {
    const setInputRef = (element) => {
        if (element) {
            element.focus(); // Сразу фокусируем при создании
            console.log('Элемент создан');
        } else {
            console.log('Элемент удален');
        }
    };
    
    return <input ref={setInputRef} />;
}

// Фокусировка, измерения, скролл
const inputRef = useRef(null);
const handleClick = () => inputRef.current.focus();

// Изменение контента — используйте state!
const divRef = useRef(null);
divRef.current.innerHTML = '<p>Текст</p>';

const [content, setContent] = useState('');
return <div>{content}</div>;

function Button({ text, onClick }) {
    return <button onClick={onClick}>{text}</button>;
}

// Переиспользуем компонент
<Button text="Сохранить" onClick={handleSave} />
<Button text="Отмена" onClick={handleCancel} />

function Parent() {
    const [count, setCount] = useState(0);
    
    return <Child count={count} />; // Данные идут вниз
}

const element = <h1>Привет, {name}!</h1>;

// Описываем желаемый результат
return (
    <div>
        {isLoggedIn ? <Dashboard /> : <LoginForm />}
    </div>
);

// Плохо - props всегда новые
function Parent() {
    return <Child onClick={() => {}} style={{color: 'red'}} />
}
const Child = React.memo(({onClick, style}) => <button />);
// memo не сработает - функция и объект каждый раз новые

// Хорошо - стабильные props  
function Parent() {
    const handleClick = useCallback(() => {}, []);
    const style = useMemo(() => ({color: 'red'}), []);
    return <Child onClick={handleClick} style={style} />
}

// Плохо - новый объект каждый рендер
function Provider({children}) {
    const [user, setUser] = useState();
    return (
        <Context.Provider value={{user, setUser}}> // Всегда новый объект!
            {children}
        </Context.Provider>
    );
}

// Хорошо - стабильное значение
function Provider({children}) {
    const [user, setUser] = useState();
    const value = useMemo(() => ({user, setUser}), [user]);
    return (
        <Context.Provider value={value}>
            {children}
        </Context.Provider>
    );
}

// Плохо - key={index} ломает логику
function TodoList({ todos }) {
    return (
        <ul>
            {todos.map((todo, index) => (
                <TodoItem 
                    key={index} // Индекс как ключ!
                    todo={todo}
                    onComplete={() => completeTodo(todo.id)}
                />
            ))}
        </ul>
    );
}

// При удалении первого элемента:
// Было: [0: "Купить молоко", 1: "Погулять с собакой", 2: "Написать код"]
// Стало: [0: "Погулять с собакой", 1: "Написать код"]
// React думает, что изменился последний элемент, а не первый!

// Хорошо - уникальный и стабильный ключ
function TodoList({ todos }) {
    return (
        <ul>
            {todos.map((todo) => (
                <TodoItem 
                    key={todo.id} // Стабильный уникальный ключ
                    todo={todo}
                    onComplete={() => completeTodo(todo.id)}
                />
            ))}
        </ul>
    );
}

// Плохо - может выполниться дважды в development!
useEffect(() => {
    fetchUserData(); // Запрос может дублироваться
    initializeAnalytics(); // Аналитика инициализируется дважды
    startWebSocket(); // Создается два подключения!
}, []); // Пустой массив НЕ гарантирует одноразовое выполнение

// Хорошо - учитываем возможное повторное выполнение
useEffect(() => {
    let cancelled = false;
    
    const fetchData = async () => {
        const data = await fetchUserData();
        if (!cancelled) {
            setUser(data);
        }
    };
    
    fetchData();
    
    return () => {
        cancelled = true; // Cleanup предотвращает обновление состояния
    };
}, []);

// Неправильное понимание cleanup
useEffect(() => {
    const timer = setInterval(tick, 1000);
    
    return () => {
        clearInterval(timer); // Вызывается НЕ только при размонтировании!
    };
}, [someValue]); // При изменении someValue cleanup тоже сработает

// Плохо - мутация массива
const [items, setItems] = useState([1, 2, 3]);

const addItem = () => {
    items.push(4); // Мутация!
    setItems(items); // React не увидит изменений
};

// Плохо - мутация объекта  
const [user, setUser] = useState({name: 'John', age: 25});

const updateAge = () => {
    user.age = 26; // Мутация!
    setUser(user); // Ссылка та же, React не обновится
};

// Хорошо - новый массив
const addItem = () => {
    setItems([...items, 4]); // Новая ссылка
};

const removeItem = (index) => {
    setItems(items.filter((_, i) => i !== index));
};

// Хорошо - новый объект
const updateAge = () => {
    setUser({...user, age: 26}); // Новая ссылка
};

// Для сложных объектов используйте immer
const updateUser = () => {
    setUser(produce(user, draft => {
        draft.profile.settings.theme = 'dark';
    }));
};

// Плохо - бесконечный цикл или пропущенные обновления
useEffect(() => {
    data.processed = true; // Мутация в зависимости!
    setData(data);
}, [data]); // data ссылка не изменилась, эффект может не сработать

// Проблема - основной контент в lazy компоненте
const ProductCard = React.lazy(() => import('./ProductCard'));
// LCP срабатывает только после загрузки чанка!

- Above-the-fold контент загружайте сразу
- Lazy loading только для below-the-fold элементов
- Мониторьте Core Web Vitals в Google Search Console
- Используйте @loadable/component для SSR

- Lazy loading hero секций, заголовков, основных изображений
- React.lazy без SSR поддержки
- Множественных lazy компонентов на одной странице
- Lazy loading контента, влияющего на LCP