Привычки хорошего разработчика React

Выполнение работы — самая важная вещь в разработке, но как выделиться среди других? Разработчик Мохаммад Фейсал считает, что дело в подходе. Основываясь на своем опыте, он выделил семь черт, которые отличают хорошего разработчика React от плохого.

1. Они не используют индекс как ключ

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

Например: 

https://betterprogramming.pub/the-7-traits-of-a-rock-star-react-developer-747fbb001c05

В документации React написано: 

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

Желательно в качестве ключа использовать уникальное свойство, или, если данные не имеют каких-либо уникальных атрибутов, можно воспользоваться библиотекой Nanoid, в которой можно сгенерировать уникальный ключ. 

Тогда предыдущий пример можно переписать следующим образом: 

import { nanoid } from 'nanoid'

const todoItems = todos.map((todo) =>
  <li key={nanoid()}>
    {todo.text}
  </li>
);

2. Они используют фрагменты вместо div

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

Например, если нужно отобразить три компонента, их обычно группируют внутри div. 

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

Используемый в примере div ничего не делает. Кроме того, он добавляет дополнительный узел в виртуальную модель DOM. Проблему можно решить с помощью фрагментов React. В документации сказано: 

«Обычно в React компонент возвращает несколько элементов. Фрагменты позволяют группировать список дочерних элементов без добавления дополнительных узлов в DOM». 

Теперь можно переписать вышеприведенный пример без добавления дополнительного узла: 

return (
  <React.Fragment>
     <Component1 />
     <Component2 />
     <Component3 />
  <React.Fragment/>  
)

3. Они стараются свести количество свойств props к минимуму

Злоупотребление свойствами props может привести к проблемам, например, как в следующем примере: 

export default function MyComponent({data , isAdmin , isLoading , searchData}){
  
  processData(data);
  
  if(isLoading) return <div> Loading... </div>
  if(isAdmin) return <div> This is admin </div>
  
  return <div> This is normal </div>

}

Здесь: 

• Происходит передача свойства с именем data. Неизвестно, откуда оно;
• isLoading указывает на то, что, возможно, выполняется какая-то асинхронная операция;
• Непонятно, что делать с searchData. Может, кто-то добавил это свойство, а потом забыл удалить.

Рекомендации:

• Хорошие разработчики стараются свести количество свойств props к минимуму. Передавайте только те пропсы, которые имеют отношение к рендерингу UI;
• Для других целей используйте центральное хранилище данных, например, Redux или Context.

Опираясь на рекомендации предыдущий пример можно переписать так: 

export default function MyComponent(){
  
  const isAdmin = useAuth();
  const { isLoading , data } = useFetch();
  
  processData(data);
  
  if(isLoading) return <div> Loading... </div>
  if(isAdmin) return <div> This is admin </div>
  
  return <div> This is normal </div>

} 

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

4. Они используют библиотеки эффективно

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

Опытные разработчики будут искать самую маленькую библиотеку, но которая на 100% выполняет свою работу. Импортируйте только те части библиотеки, которые вам действительно нужны. Как это делать, подробно описано здесь.

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

В React можно определять функции внутри JSX. Например:

export default function MyComponent(){
  
  const [status , setStatus] = useState(false);
  
  return (
    <button onClick={() => dispatch(ACTION_TO_SEND_DATA)}>  
      This is a bad example 
    </button>  
  )
}

Это плохая практика, которая вредит читабельности. Вместо этого можно сделать следующее: 

export default function MyComponent(){
  
  const [status , setStatus] = useState(false);
  
  const submitData = () => {
    // You should use it with useDispatch()
    dispatch(ACTION_TO_SEND_DATA)
  }
  
  return (
    <button onClick={submitData}>  
      This is a bad example 
    </button>  
  )
}

6. Они понимают, как работать со сборщиком модулей webpack

React упростил создание проекта с нуля с помощью утилиты Create React App. Затем, как правило, больше ничего использовать не нужно. Просто выполняем npm install и npm run build и все готово. 

Но вся магия, по мнению автора, происходит при использовании сборщика модулей webpack и транспилятора Babel и множества библиотек. Мохаммад Фейсал считает, что их не обязательно постоянно использовать при разработке, но очень важно понимать, как они работают.

7. Они понимают принципы сверки

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