Вопросы для собеседования по хукам React

Хуки — это новая функция, добавленная в React v16.8. Хуки позволяют использовать все возможности React без написания классовых компонентов.

Хоть технически хуки и являются функциями (классы в жс тоже технически являются функциями), хуки это скорее целая парадигма обработки сайд эффектов, основанная на эффектах в ОКамл, позволяющая сохранять значения при многократном вызове функции, оставляя функцию при этом чистой.

И нет, не все можно сделать на хуках, на хуках пока что нельзя ловить ошибки, например (componentDidCatch).

Другая причина в том, что не существует конкретного способа повторно использовать логику компонента, наделенного состоянием. Несмотря на то, что HOC (Higher-Order Component) и шаблоны Render Props (метод передачи props от родителя ребенку, используя функцию или замыкание) решают эту проблему, здесь требуется изменить код классового компонента. Хуки позволяют совместно использовать логику с отслеживанием состояния без изменения иерархии компонентов.

Ничего они не требуют изменять и рендер пропсы никуда не пропали. Основная проблема с HOC в том, что обычно навешивается по три-четыре, а то и больше HOC и, мало того, что они могут передавать конфликтующие значения, порой становится сложно понять кто и по какой причине передал значение, особенно если оно неправильное. Ну и их сложнее тестировать, чем хуки.

Ну и контекст до хуков был труден в использовании, мягко говоря.

Классовые компоненты не очень хорошо минимизируются, а также делают горячую перезагрузку ненадежной. Это еще одна причина для создания хуков.

У нас один из самописных хуков (точнее целое семейство) вообще отломали горячую перезагрузку, пункт не засчитан. И не то чтобы они были какими-то особо хитрыми, так, обертка вокруг редуксовского диспатча.

Ну и вообще, если разглагольствовать, то основная причина, конечно же, стремление построения реактивной библиотеки с чистыми функциями. Мало того, что функциональные компоненты обычно меньше и проще чем классовые, так они еще и не содержат обычно стейтов и сайд эффектов, так что их было просто тестировать и вообще они полюбились людям. Но команда реакта достаточно долго думала как же все таки дать возможность делать lifecycle хуки в функциональных компонентах, вот и придумала. Правда это принесло в них состояние, и хотя функции сами по себе по-прежнему чистые, компоненты опять могут хранить внутренний стейт, что опять повышает требования к тестированию.

Будут ли хуки React работать внутри классовых компонентов — Нет.

Ну если очень хочется, то да, да и никто не мешает миксовать компоненты или использовать хуки в HOC.

Можно обновить значение переменной состояния, просто передав новое значение в функцию обновления или передав callback. Второй способ с передачей callback-функции безопасен в использовании.

Без контекста не совсем понятно что имеется ввиду под "безопасен". Я бы обязательно спросил что это значит и ожидал услышать про захват замыканий и использование устаревшего значения при, например, асинхронной логике в обработчике (заодно, как показывает практика, это не самый тривиальный случай, который многие не понимают), или нежелание тянуть доп. параметр и пересоздавать каждый раз кэлбэк когда поменялось значение в сторе.

Теперь к вопросам. Большинство из них — перепечатка из документации. Но довольно важные моменты остались за кулисами. Например, нет ни одного вопроса про useCallback. А именно useCallback — та невеселая штука, которая превращает красивые примеры в не очень то красивый реальный код. Ну т.е. useState2 вообще должен выглядеть примерно так:

import React, { useState } from "react";

function Counter() {
    const [count, setCount] = useState(0);

    const incrementCount = React.useCallback(
    () => {
        setCount((prevCount) => {
            return prevCount + 1;
        });
    },
   [setCount]);

    const decrementCount = useCallback(
    () => {
        setCount((prevCount) => {
            return prevCount - 1;
        });
    }, 
    [setCount]);

    return (
        <div>
            <strong>Count: {count}</strong>
            <button onClick={incrementCount}>Increment</button>
            <button onClick={decrementCount}>Decrement</button>
        </div>
    );
}

Еще не вижу правил использования хуков (никаких хуков внутри условных выражений, нельзя делать массивы хуков и тому подобное), заодно мне лично всегда интересно спрашивать "почему такие правила вообще существуют", но это уровень чуть выше.

Спасибо, мы вам перезвоним.

Навскидку:
1) Для чего нужен useCallback. Вопрос хорош тем, что можно развернуть тему оптимизации и мемоизации в Реакте.
2) Попросить рассказать, как примерно устроены хуки изнутри. Если пациент не знает (не читал), то неплохой повод порассуждать.

import { useState } from 'react'

function Profile() {
  const [profile, setProfile] = useState({
    name: 'John',
    age: 30
  })

  function handleChange({ target: { value, name } }) {
    setProfile({ ...profile, [name]: value })
  }

  const { name, age } = profile
  return (
    <div>
      <form>
        <input type='text' value={name} onChange={handleChange} name='name' />
        <input type='text' value={age} onChange={handleChange} name='age' />
        <h2>
          Name: {name}, Age: {age}
        </h2>
      </form>
    </div>
  )
}