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

Что такое хуки в React?

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

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

Нет.

Зачем были введены хуки в React?

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

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

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

Четвертая причина заключается в том, что в сложном классовом компоненте связанный код разбросан по разным методам жизненного цикла. Например, в случае загрузки данных (fetch) мы делаем это в основном в componentDidMount() и componentDidUpdate(). Другой пример: в случае слушателей событий мы используем componentDidMount() для подписки на события и componentWillUnmount() для отмены подписки. Вместо этого хуки помогают объединить связанный код.

Как работает хук useState? Какие аргументы принимает этот хук и что он возвращает?

Хук useState — это функция, которая используется для хранения состояния в функциональном компоненте. Он принимает аргумент как начальное значение состояния и возвращает массив с 2 элементами. Первый элемент — это текущее значение состояния. Второй элемент — это функция обновления состояния.

Сначала мы импортируем useState из React

import React, {useState} from "react";

Затем мы используем useState, например:

const [currentStateValue, functionToUpdateState] = useState(initialStateValue);

Задача на использование useState

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

class Counter extends Component {     state = {         count: 0,     };      incrementCount = () => {         this.setState({             count: this.state.count + 1,         });     };      render() {         return (             <div>             <button onClick={this.incrementCount}>Count: {this.state.count}</button>         </div>     	);     } }

Перепишите этот компонент, используя хуки React.

Решение

import React, { useState } from "react";  function Counter() {     const [count, setCount] = useState(0);      return (         <div>             <button                 onClick={() => {                     setCount(count + 1);                 }}             >                 Count: {count}             </button>         </div>     ); }

Задача на использование useState 2

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

class Counter extends Component {     state = { count: 0 };      incrementCount = () => {         this.setState((prevState) => {             return {                 count: prevState.count + 1,             };         });     };      decrementCount = () => {         this.setState((prevState) => {             return {                 count: prevState.count - 1,             };         });     };      render() {         return (             <div>                 <strong>Count: {this.state.count}</strong>                 <button onClick={this.incrementCount}>Increment</button>                 <button onClick={this.decrementCount}>Decrement</button>             </div>         );     } }

Перепишите вышеуказанный код, используя хуки React.

Решение.

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

import React, { useState } from "react";  function Counter() {     const [count, setCount] = useState(0);      const incrementCount = () => {         setCount((prevCount) => {             return prevCount + 1;         });     };      const decrementCount = () => {         setCount((prevCount) => {             return prevCount - 1;         });     };      return (         <div>             <strong>Count: {count}</strong>             <button onClick={incrementCount}>Increment</button>             <button onClick={decrementCount}>Decrement</button>         </div>     ); }

Задача на использование useState 3

Здесь у нас есть классовый компонент, который обновляет состояние, используя ввод из формы.

export class Profile extends Component {     state = {         name: "Backbencher",         age: 23,     };      onNameChange = (e) => {         this.setState({             name: e.target.value,         });     };      onAgeChange = (e) => {         this.setState({             age: e.target.value,         });     };      render() {         return (             <div>                 <form>                     <input                         type="text"                         value={this.state.name}                         onChange={this.onNameChange}                     />                     <input                         type="number"                         value={this.state.age}                         onChange={this.onAgeChange}                     />                     <h2>                         Name: {this.state.name}, Age: {this.state.age}                     </h2>                 </form>             </div>         );     } }

Перепишите этот компонент, используя хуки React.

Решение

import React, { useState } from "react";  function Profile() {     const [profile, setProfile] = useState({         name: "Backbencher",         age: 23,     });      const onNameChange = (e) => {         setProfile({ ...profile, name: e.target.value });     };      const onAgeChange = (e) => {         setProfile({ ...profile, age: e.target.value });     };      return (         <div>             <form>                 <input type="text" value={profile.name} onChange={onNameChange} />                 <input type="text" value={profile.age} onChange={onAgeChange} />                 <h2>                     Name: {profile.name}, Age: {profile.age}                 </h2>             </form>         </div>     ); }

Функция обновления состояния в useState() не выполняет автоматическое слияние, если в состоянии хранится объект. Но в случае использования метода setState() в классовых компонентах происходит автоматическое слияние.

Здесь мы объединяем свойства объекта с помощью spread оператора JavaScript.

Каковы различия в использовании хуков и классовых компонентов в отношении управления состоянием?

При использовании setState() в классовых компонентах переменная состояния всегда является объектом. В то время как переменная состояния в хуках может иметь любой тип, например, число, строку, логическое значение, объект или массив.

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

Зачем нужен хук useEffect?

Хук useEffect позволяет нам выполнять побочные эффекты в функциональных компонентах. Это помогает нам избежать избыточного кода в различных методах жизненного цикла классового компонента. Это помогает сгруппировать связанный код.

Задача на использование useEffect

Вот классовый компонент, который печатает Boom в консоли каждый раз, когда он монтируется или обновляется.

export class Banner extends Component {     state = {         count: 0,     };      updateState = () => {         this.setState({             count: this.state.count + 1,         });     };      componentDidMount() {         console.log("Boom");     }      componentDidUpdate() {         console.log("Boom");     }      render() {         return (             <div>                 <button onClick={this.updateState}>State: {this.state.count}</button>             </div>         );     } }

Удалите избыточные выражения console.log с помощью хуков React.

Решение.

componentDidMount() и componentDidUpdate() — это методы жизненного цикла. Такие побочные эффекты можно сделать с помощью хука useEffect. Хук useEffect — это функция, которая принимает callback. Этот callback вызывается каждый раз, когда происходит рендеринг.

Код может быть переписан таким образом:

import React, { useState, useEffect } from "react";  function Banner() {     const [count, setCount] = useState(0);      useEffect(() => {         console.log("Boom");     });      const updateState = () => {         setCount(count + 1);     };      return (         <div>             <button onClick={updateState}>State: {count}</button>         </div>     ); }

Задача на использование useEffect 2

Понять данный код:

function Banner() {     const [count, setCount] = useState(0);     const [name, setName] = useState("");      useEffect(() => {         console.log("Счетчик обновлен");     });      return (         <div>             <button onClick={() => setCount(count + 1)}>State: {count}</button>             <input                 type="text"                 value={name}                 onChange={(e) => setName(e.target.value)}             />         </div>     ); }

Код печатает сообщение «Счетчик обновлен» даже при обновлении значения в текстовом поле. Как мы можем отображать сообщение только при обновлении состояния счетчика?

Решение.

Функция useEffect принимает второй параметр, который должен быть массивом. В этом массиве нам нужно передать props или состояние, за которым нам нужно следить. Эффект выполняется только в том случае, если эти свойства или состояние, упомянутые в массиве, изменяются. Поэтому в нашем коде мы добавляем второй аргумент и указываем только значение count в массиве.

Вот обновленный код useEffect:

useEffect(() => {     console.log("Count is updated"); }, [count]);

Задача на использование useEffect 3

У нас есть классовый компонент, который обновляет время каждую секунду. Он использует componentDidMount() для установки таймера.

export class Clock extends Component {     state = {         date: new Date(),     };      componentDidMount() {         setInterval(() => {             this.setState({                 date: new Date(),             });         }, 1000);     }      render() {         return <div>{this.state.date.toString()}</div>;     } }

Перепишите код выше с помощью хуков React.

Решение.

componentDidMount() — это метод жизненного цикла, который выполняется только один раз в жизненном цикле компонента. Мы используем useEffect, чтобы вызвать эффекты componentDidMount(). Но useEffect запускается при каждом обновлении props или состояния. Чтобы предотвратить это, мы используем второй аргумент-массив useState. Мы оставляем этот массив пустым. Итак, для React нет никаких переменных состояния или props, за которыми нужно следить. Следовательно, useEffect запускается только один раз, как componentDidMount().

Вот код с использованием хуков React.

function Clock() {     const [date, setDate] = useState(new Date());      useEffect(() => {         setInterval(() => {             setDate(new Date());         }, 1000);     }, []);      return <div>{date.toString()}</div>; }

Задача на использование useEffect 4

У нас есть фрагмент кода из классового компонента, который регистрирует и удаляет слушатель событий.

componentDidMount() {     window.addEventListener("mousemove", this.handleMousePosition); }  componentWillUnmount() {     window.removeEventListener("mousemove", this.handleMousePosition); }

Перепишите этот код в стиле хуков React.

Решение.

Чтобы использовать функциональность метода жизненного цикла componentWillUnmount() в хуке useEffect нужно вернуть callback с кодом, который необходимо выполнить при размонтировании компонента.

useEffect(() => {     window.addEventListener("mousemove", handleMousePosition);      return () => {         window.removeEventListener("mousemove", handleMousePosition);     } }, []);

Задача на использование useContext

Вот фрагмент кода из компонента Context.Consumer.

import { NameContext, AgeContext } from "./ProviderComponent";  export class ConsumerComponent extends Component {     render() {         return (             <NameContext.Consumer>                 {(name) => {                     return (                         <AgeContext.Consumer>                             {(age) => (                                 <div>                                     Name: {name}, Age: {age}                                 </div>                             )}                         </AgeContext.Consumer>                     );                 }}             </NameContext.Consumer>         );     } }

Перепишите ConsumerComponent, используя хук useContext.

Решение.

Хуки можно использовать только в функциональном компоненте.

ConsumerComponent можно переписать так:

function ConsumerComponent() {     const name = useContext(NameContext);     const age = useContext(AgeContext);      return (         <div>             Name: {name}, Age: {age}         </div>     ); }