Вопросы по React на собеседовании

Что нового появилось в React 18?

1. Автоматический батчинг setState

В React 17 только React события будут обрабатываться пакетно, а нативные JavaScript события, промисы, setTimeout и setInterval обрабатываться не будут. В React 18 все события обрабатываются пакетно, т.е. несколько setState будут объединены в одно выполнение, что повышает производительность. На уровне данных несколько обновлений состояния объединяются в одну обработку (на уровне представления несколько визуализаций объединяются в одну визуализацию).

2. Новый root API

В React 18 представлен новый root API, который поддерживает новый конкурентный рендеринг.

// React 17
import React from "react"
import ReactDOM from "react-dom"
import App from "./App"

const root = document.getElementById("root")
ReactDOM.render(root, <App />)

// unmount the component
ReactDOM.unmountComponentAtNode(root) 

// React 18
import React from "react"
import ReactDOM from "react-dom/client"
import App from "./App"

const root =  document.getElementById("root")
ReactDOM.createRoot(root).render(<App />)

// unmount the component
root.unmount()

3. Прекращение поддержки IE

Удалена поддержка браузера IE. Все новые функции, представленные React 18, основаны на современных браузерах. Если вам нужна поддержка IE, вам нужно вернуться к версии React 17.

4. flushSync

Используется, чтобы заставить React сбросить всю ожидающую работу и синхронно обновить DOM.

import React, {useState} from "react"
import {flushSync} from "react-dom"

const  App = () => {
  const [count, setCount] = useState(0)
  const [count2, setCount2] = useState(0)

  return (
    <div className="App">
      <button onClick={() => {
        // первое обновление
        flushSync(() => {
          setCount(count => count + 1)
        })
        // второе обновление
        flushSync(() => {
          setCount2(count2 => count2 + 1)
        })
      }}>click</ button >
       
      <span>count: {count}</ span >
      <span>count2: {count2}</ span >	
     </div>	
  )
}

export default App

5. Возвращаемое значение React компонента

В React 17 для возврата пустого компонента можно использовать только null, а явное возвращение undefined вызовет ошибку. В React 18 поддерживается возврат null и undefined.

6. Поддержка useId

Генерирует один и тот же уникальный идентификатор на сервере и клиенте, чтобы избежать несовместимости при гидратации.

7. Concurrent mode (Конкурентный режим)

Конкурентный режим — это не фича, а архитектура. Это помогает приложениям оставаться отзывчивыми, подстраиваясь под производительность устройства пользователя и скорость сети, а также устраняет блокировку механизмов рендеринга, делая рендеринг прерываемым. В React несколько состояний могут быть обновлены одновременно. Разница в том, чтобы синхронные непрерываемые обновления стали асинхронными прерываемыми обновлениями. useDeferredValue и startTransition используются для обозначения несрочного обновления.

Почему React компоненты не могут возвращать несколько элементов?

Почему компоненты React могут иметь только один корневой элемент?

1. Компонент React в конце будет скомпилирован в функцию рендеринга, и возвращаемое значение функции может быть только одно. Если он не обернут в отдельный корневой узел, несколько значений будут возвращаться параллельно, что не допускается в JavaScript.

class App extends React.Component{
  render() {
    return(
      <div>
        <h1 className="title">Hello</h1>
        <span>World</span>	
      </div>	
    )
}

// После компиляции
class App extends React.Component {
  render() {
    return React.createElement('div', null,
      [
        React.createElement('h1', {className:'title'}, 'Hello'),
        React.createElement('span', null, 'World')
      ]
    )
  }
}

2. Виртуальный DOM React представляет собой древовидную структуру, и корневой узел дерева может быть только один. При наличии нескольких корневых узлов невозможно подтвердить, какое дерево нужно обновить.

Как компоненты React могут возвращать несколько компонентов?

• Используя HOC (Higher Order Functions)
• Используя React.Fragment, вы можете добавить список элементов в группу, не создавая дополнительных узлов.

renderList() {
  list.map((item, key) => {
    return (
      <React.Fragment>
        <tr key={item.id}>
          <td>{item.name}</td>
          <td>{item.age}</td>
          <td>{item.address}</td>
        </tr>	
      </React.Fragment>
    )
  })
}

• Используя массив

renderList(){
  list.map((item, key) => {
    return [
      <tr key={item.id}>
        <td>{item.name}</td>
        <td>{item.age}</td>
        <td>{item.address}</td>
      </tr>
    ]
  })
}

Каковы способы общения между React компонентами?

Существует множество способов взаимодействия компонентов, которые можно разделить на следующие категории:

• Взаимодействие родительского компонента с дочерним компонентом
• Дочерний компонент взаимодействует с родительским компонентом
• Общение между соседними элементами
• Родительский компонент взаимодействует с дочерними компонентами
• Связь независимых компонентов

Подробнее о каждой категории можно прочитать в этой статье.

Также по теме собеседований рекомендую прочитать:

• ТОП 10 вопросов на собеседовании ReactJS
• Собеседование ReactJS - вопросы и ответы
• Собеседование фронтенд разработчика. ТОП вопросов по HTTP и CORS

В этой статье рассмотрим некоторые рекомендации по улучшению качества приложения на React. Эти правила широко приняты. Таким образом, обладание этими знаниями является обязательным.

1. Используйте короткую запись JSX

Попробуйте использовать сокращение JSX для передачи логических переменных. Допустим, вы хотите управлять видимостью заголовка компонента панели навигации.

Плохо

return (
  <Navbar showTitle={true} />
);

Хорошо

return(
  <Navbar showTitle />  
)

2. Используйте тернарные операторы

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

Плохо

const { role } = user;

if(role === ADMIN) {
  return <AdminUser />
}else{
  return <NormalUser />
} 

Хорошо

const { role } = user;

return role === ADMIN ? <AdminUser /> : <NormalUser />

3. Воспользуйтесь преимуществами объектных литералов

Объектные литералы могут помочь сделать наш код более читабельным. Допустим, вы хотите отобразить три типа пользователей в зависимости от их ролей. Вы не можете использовать тернарный оператор, так как количество опций превышает два.

Плохо

const {role} = user

switch(role){
  case ADMIN:
    return <AdminUser />
  case EMPLOYEE:
    return <EmployeeUser />
  case USER:
    return <NormalUser />
}

Хорошо

const {role} = user

const components = {
  ADMIN: AdminUser,
  EMPLOYEE: EmployeeUser,
  USER: NormalUser
};

const Component = components[role];

return <Componenent />;

Теперь код выглядит намного лучше.

4. Используйте фрагменты

Всегда используйте Fragment вместо лишней обертки div. Это сохраняет код чистым, а также полезно для производительности, поскольку в виртуальной модели DOM создается на один узел меньше.

Плохо

return (
  <div>
     <Component1 />
     <Component2 />
     <Component3 />
  </div>  
)

Хорошо

return (
  <>
     <Component1 />
     <Component2 />
     <Component3 />
  </>  
)

5. Не определяйте функцию внутри рендеринга

Не определяйте функцию внутри функции рендеринга. Постарайтесь свести логику рендеринга к абсолютному минимуму.

Плохо

return (
    <button onClick={() => dispatch(ACTION_TO_SEND_DATA)}>    // здесь определена функция
      This is a bad example 
    </button>  
)

Хорошо

const submitData = () => dispatch(ACTION_TO_SEND_DATA)

return (
  <button onClick={submitData}>  
    This is a good example 
  </button>  
)

6. Используйте React memo

React.PureComponent и Memo могут значительно повысить производительность вашего приложения. Они помогают нам избежать ненужного рендеринга.

Плохо

import React, { useState } from "react";

export const TestMemo = () => {
  const [userName, setUserName] = useState("faisal");
  const [count, setCount] = useState(0);

  const increment = () => setCount((count) => count + 1);

  return (
    <>
      <ChildrenComponent userName={userName} />
      <button onClick={increment}> Increment </button>
    </>
  );
};

const ChildrenComponent =({ userName }) => {
  console.log("rendered", userName);
  return <div> {userName} </div>;
};

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

Хорошо

Давайте отредактируем ChildrenComponent следующим образом:

import React, {useState} from "react";

const ChildrenComponent = React.memo(({userName}) => {
    console.log('rendered')
    return <div> {userName}</div>
})

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

7. Поместите CSS в JavaScript

Избегайте сырого JavaScript при написании приложений React, потому что организовать CSS намного сложнее, чем организовать JS.

Плохо

// CSS FILE

.body {
  height: 10px;
}

//JSX

return <div className='body'>

</div>

Хорошо

const bodyStyle = {
  height: "10px"
}

return <div style={bodyStyle}>

</div>

8. Используйте деструктурирование объектов

Используйте деструктурирование объектов в своих интересах. Допустим, вам нужно показать данные пользователя.

Плохо

return (
  <>
    <div> {user.name} </div>
    <div> {user.age} </div>
    <div> {user.profession} </div>
  </>  
)

Хорошо

const { name, age, profession } = user;

return (
  <>
    <div> {name} </div>
    <div> {age} </div>
    <div> {profession} </div>
  </>  
)

9. Строковые пропсы можно передавать без фигурных скобок

При передаче строковых пропсов дочернему компоненту.

Плохо

return(
  <Navbar title={"My Special App"} />
)

Хорошо

return(
  <Navbar title="My Special App" />  
)

10. Удалить JS-код из JSX

Вынесите JS-код из JSX, если это не служит какой-либо цели рендеринга или функциональности пользовательского интерфейса.

Плохо

return (
  <ul>
    {posts.map((post) => (
      <li onClick={event => {
        console.log(event.target, 'clicked!'); // <- плохо
        }} key={post.id}>{post.title}
      </li>
    ))}
  </ul>
);

Хорошо

const onClickHandler = (event) => {
   console.log(event.target, 'clicked!'); 
}

return (
  <ul>
    {posts.map((post) => (
      <li onClick={onClickHandler} key={post.id}>{post.title}</li>
    ))}
  </ul>
);

11. Используйте шаблонные литералы

Используйте шаблонные литералы для создания длинных строк. Избегайте использования конкатенации строк. Это будет выглядеть красиво и чисто.

Плохо

const userDetails = user.name + "'s profession is" + user.proffession

return (
  <div> {userDetails} </div>  
)

Хорошо

const userDetails = `${user.name}'s profession is ${user.proffession}`

return (
  <div> {userDetails} </div>  
)

12. Порядок импортов

Всегда старайтесь импортировать сущности в определенном порядке. Это улучшает читаемость кода.

Плохо

import React from 'react';
import ErrorImg from '../../assets/images/error.png';
import styled from 'styled-components/native';
import colors from '../../styles/colors';
import { PropTypes } from 'prop-types';

Хорошо

Эмпирическое правило состоит в том, чтобы сохранить порядок импорта следующим образом:

• Встроенные зависимости
• Внешние зависимости
• Внутренние зависимости

Итак, приведенный выше пример становится:

import React from 'react';

import { PropTypes } from 'prop-types';
import styled from 'styled-components/native';

import ErrorImg from '../../assets/images/error.png';
import colors from '../../styles/colors';

13. Используйте неявный возврат

Используйте функцию JavaScript с неявным возвратом результата при написании красивого кода. Допустим, ваша функция выполняет простое вычисление и возвращает результат.

Плохо

const add = (a, b) => {
  return a + b;
}

Хорошо

const add = (a, b) => a + b;

14. Именование компонентов

Всегда используйте PascalCase для компонентов и camelCase для экземпляров.

Плохо

import reservationCard from './ReservationCard';

const ReservationItem = <ReservationCard />;

Хорошо

import ReservationCard from './ReservationCard';

const reservationItem = <ReservationCard />;

15. Кавычки

Используйте двойные кавычки для атрибутов JSX и одинарные кавычки для всех остальных JS.

Плохо

<Foo bar='bar' />

<Foo style={{ left: "20px" }} />

Хорошо

<Foo bar="bar" />

<Foo style={{ left: '20px' }} />

16. Именование пропсов

Всегда используйте camelCase для имен объектов или PascalCase, если значение объекта является компонентом React.

Плохо

<Component
  UserName="hello"
  phone_number={12345678}
/>

Хорошо

<MyComponent
  userName="hello"
  phoneNumber={12345678}
  Component={SomeComponent}
/>

17. JSX в круглых скобках

Если компонент занимает более одной строки, всегда заключайте его в круглые скобки.

Плохо

return <MyComponent variant="long">
           <MyChild />
         </MyComponent>;

Хорошо

return (
    <MyComponent variant="long">
      <MyChild />
    </MyComponent>
);

18. Самозакрывающиеся теги

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

Плохо

<SomeComponent variant="stuff"></SomeComponent>

Хорошо

<SomeComponent variant="stuff" />

19. Нижнее подчеркивание в названии метода

Не используйте символы подчеркивания ни в одном внутреннем методе React.

Плохо

const _onClickHandler = () => {
  // код
}

Хорошо

const onClickHandler = () => {
  // код
}

20. Проп alt

Всегда включайте проп alt в теги <img >. И не используйте picture или image в проп alt, потому что программы чтения с экрана уже объявляют элементы img изображениями.

Плохо

<img src="hello.jpg" />

<img src="hello.jpg" alt="Picture of me rowing a boat" />

Хорошо

<img src="hello.jpg" alt="Me waving hello" />