React

Open in Telegram

Подборки по React js и все что с ним связано. По всем вопросам @evgenycarter

Network:Книги для программистов Russia171 316 Technologies & Applications25 752

2 674

Subscribers

-224 hours

-57 days

-1230 days

426

Post views

~ 18824 hours

~ 21648 hours

15.91%

Engagement rate

No data

Posts per day

Ads index

beta

Posts Archive

2 674

Погружаемся в React Suspense API https://blog.bitsrc.io/understanding-the-suspense-api-in-react-18-bbea3f6f6df1 ✍️ @React_lib

2 674

Пишем продвинутый планировщик с использованием React, Nest и NX. Часть 1: настройка проекта В серии статей мы поэтапно разработаем продвинутое приложение-планировщик. Сначала создадим и настроим монорепозиторий c помощью NX, разработаем интерфейс с помощью React, добавим backend на основе NestJS, и, наконец, подключим базу данных MongoDB. ✍️ @React_lib

2 674

UI-компоненты для React: топ-10 библиотек и фреймворков https://dev.to/nilanth/10-react-packages-with-1k-ui-components-2bf3 ✍️ @React_lib

2 674

Пример использования useDeferredValue Дэн Абрамов поделился примером использования хука useDeferredValue из React 18:


function Form() {
  const [state, setState] = useState({ value: "hello" })
  const deferredState = useDeferredValue(state)
  // ...

Используйте deferredState в компонентах, рендер которых не срочный: например, вычисление сложной логики. Это поведение напоминает debounce. Использовать state напрямую можно в элементах пользовательского ввода, например, input. ✍️ @React_lib

2 674

Библиотеки для работы с формами в React - Formik. Одна из наиболее популярных библиотек для работы с формами. Умеет отправлять форму асинхронно, поддерживает TypeScript, а также валидацию через Yup или Joi. В Formik входит набор компонентов для создания формы: Form, Field, ErrorMessage, но так же форму можно создать используя хук useFormik. - React Hook Form. Гибкая библиотека для создания форм черех хуки. Поддерживает TypeScript и React Native. Умеет делать валидацию полей и формы, подключается к нативным инпутам через ref атрибут. Если инпут кастомный, например, из Material UI, то предлагает использовать обертку в виде компонента Controller. - React Final Form. Библиотека использует паттерн Observer для обновления состояния компонентов и ре-рендера. Поддерживает валидацию полей и формы, в состав библиотеки входят как компоненты Form, Field, так и хуки. Мейнтенер библиотеки Erik Rasmussen, который также был автором Redux Form, считает ключевой фичей React Final Form высокую производительность. ✍️ @React_lib

2 674

React Hooks: useState Хук useState() предназначен для управления состоянием компонента. Данная функция возвращает пару геттер/сеттер - значение начального состояния и функцию для обновления этого значения. Функцию имеет следующую сигнатуру: const [value, setValue] = useState(defaultValue). Обновление одного состояния

const UpdateState = () => {
  const [age, setAge] = useState(19)

  const handleClick = () => setAge(age + 1)

  return (
    <>
      <p>Мне {age} лет.</p>
      <button onClick={handleClick}>Стать старше!</button>
    </>
  )
}

Обновление нескольких состояний

const MultipleStates = () => {
  const [age, setAge] = useState(19)
  const [num, setNum] = useState(1)

  const handleAge = () => setAge(age + 1)
  const handleNum = () => setNum(num + 1)

  return (
    <>
      <p>Мне {age} лет.</p>
      <p>У меня {num} братьев и сестер.</p>
      <button onClick={handleAge}>Стать старше!</button>
      <button onClick={handleNum}>Больше братьев и сестер!</button>
    </>
  )
}

Обновление объекта состояния

const StateObject = () => {
  const [state, setState] = useState({ age: 19, num: 1 })

  const handleClick = (val) =>
    setState({
      ...state,
      [val]: state[val] + 1
    })

  const { age, num } = state
  return (
    <>
      <p>Мне {age} лет.</p>
      <p>У меня {num} братьев и сестер.</p>
      <button onClick={() => handleClick('age')}>Стать старше!</button>
      <button onClick={() => handleClick('num')}>
        Больше братьев и сестер!
      </button>
    </>
  )
}

Счетчик

const CounterState = () => {
  const [count, setCount] = useState(0)

  return (
    <>
      <p>Значение счетчика: {count}.</p>
      <button onClick={() => setCount(0)}>Сбросить</button>
      <button onClick={() => setCount((prevVal) => prevVal + 1)}>
        Увеличить (+)
      </button>
      <button onClick={() => setCount((prevVal) => prevVal - 1)}>
        Уменьшить (-)
      </button>
    </>
  )
}

Более сложный пример

const Profile = () => {
  const [profile, setProfile] = useState({
    firstName: 'Иван',
    lastName: 'Петров'
  })

  const handleChange = ({ target: { value, name } }) => {
    setProfile({ ...profile, [name]: value })
  }

  const { firstName, lastName } = profile
  return (
    <>
      <h1>Профиль</h1>
      <form>
        <input
          type='text'
          value={firstName}
          onChange={handleChange}
          name='firstName'
        /> <br />
        <input
          type='text'
          value={lastName}
          onChange={handleChange}
          name='lastName'
        />
      </form>
      <p>
        Имя: {firstName} <br />
        Фамилия: {lastName}
      </p>
    </>
  )
}

✍️ @React_lib

2 674

Инструменты для отладки React приложений Если приложение работает медленно, то для поиска причины тормозов можно использовать специальные инструменты: - React DevTools Базовый инструмент отладки React приложения. Умеет снимать perfomance профиль приложения, показать какой компонент отрендерился и сколько времени на это потребовалось. - Why Did You Render (WDYR) Стандартного React DevTools может не хватать, поэтому в процесс отладки можно добавить WDYR. Этот инструмент находит компоненты, рендер которых можно избежать. Например, значением пропса компонента объявляется объект, поэтому этот компонент будет рендерится каждый раз, когда компонент создается. Найденную информацию WDYR отправляет в логи браузера. - React Render Tracker Инструмент для отслеживания производительности приложения ✍️ @React_lib

2 674

Реальный пример работы startTransition Ricky Hanlon показал подробный пример работы API startTransition из React 18, с объяснением работы API и того, как работает приложение в perfomance профиле. В примере показан слайдер и компонент с «тяжелыми вычислениями», который занимает много времени для рендера, особенно на слабых устройствах. После изменения значения слайдера происходил ререндер тяжелого компонента. Самый оптимальный вариант рендера тяжелого компонента в React 17 через debounce, т.е. откладывая рендер на изменения слайдера. В React 18 изменение значения слайдера достаточно обернуть в startTransition, и React уже сам выполнит эффективный рендер компонента. После рендера изменения значения слайдера, React рендерит transition результатов. Так как в этом изменение включен параллельный рендеринг, React делает три новые вещи: - Yielding: каждые 5 мс React ставит работу рендера на паузу, чтобы дать браузеру сделать другую работу, например запустить промисы. - Прерывание: React ставит рендер на паузу, если необходимо отрендерить более приоритетный компонент, например ползунок слайдера из примера. - Отбрасывание старых результатов: когда React начинает рендерить после прерывания, то он отбрасывает старый компонент и рендерит новый. https://github.com/reactwg/react-18/discussions/65 ✍️ @React_lib

2 674

CSS-анимация как DOM-based фреймворк для анимации https://medium.com/bbc-design-engineering/css-animations-as-a-dom-based-animations-framework-d6ef582c033a ✍️ @React_lib

2 674

Как работает хук useInsertionEffect в React 18 CSS-in-JS библиотеки генерируют стили на лету и вставляют их в документ. Для этих библиотек важно знать, в какой момент можно вставлять теги <style> в документ, т.к. это может повлиять на производительность. При добавлении или удалении CSS правил браузер пересчитывает стили у всех элементов. Для того чтобы избежать лишнего пересчета стилей для элементов на странице при изменении CSS правил, необходимо изменять их одновременно с другим изменением DOM, например, когда React мутирует DOM, перед чтением макета (например clientWidth) и до отрисовки в браузере. Для того, чтобы добиться такого поведения, можно использовать хук useInsertionEffect. По сигнатуре он похож на useEffect, но он запускается синхронно перед изменениями DOM. Внутри хука можно изменять глобальные DOM элементы, такие как <style> или <defs>. Он запускается перед хуком useLayoutEffect. Основное предназначение данного хука – изменение стилей в CSS библиотеках.


function useCSS(rule) {
  useInsertionEffect(() => {
    if (!isInserted.has(rule)) {
      isInserted.add(rule);
      document.head.appendChild(getStyleForRule(rule));
    }
  });
  return rule;
}
function App() {
  let className = useCSS(rule);
  return <div className={className} />;
}

https://blog.saeloun.com/2022/06/02/react-18-useinsertioneffect ✍️ @React_lib

2 674

Самая мощная шпаргалка по React JS https://dev.to/bricourse/the-most-powerful-react-js-cheat-sheet-4ipd

2 674

300+ вопросов для собеседования по React https://dev.to/sakhnyuk/300-react-interview-questions-2ko4

2 674

Обработка ошибок на React с помощью Error Boundary https://dev.to/ms_yogii/handle-errors-gracefully-with-react-error-boundary-25mb

2 674

Как проектировалось мидлвар подписки для Redux Toolkit В Redux Toolkit 1.8 вышло новое API createListenerMiddleware для подписки на отправку экшенов или изменения стейта. Это API должно стать более простой альтернативой использования вместо более популярных saga или observable.


// Create the middleware instance and methods
const listenerMiddleware = createListenerMiddleware()

// Add one or more listener entries that look for specific actions.
// They may contain any sync or async logic, similar to thunks.
listenerMiddleware.startListening({
  actionCreator: todoAdded,
  effect: async (action, listenerApi) => {
    // Run whatever additional side-effect-y logic you want here
    console.log('Todo added: ', action.payload.text)

    // Can cancel other running instances
    listenerApi.cancelActiveListeners()

    // Run async logic
    const data = await fetchData()

    // Pause until action dispatched or state changed
    if (await listenerApi.condition(matchSomeAction)) {
      // Use the listener API methods to dispatch, get state,
      // unsubscribe the listener, start child tasks, and more
      listenerApi.dispatch(todoAdded('Buy pet food'))
      listenerApi.unsubscribe()
    }
  },
})

В своем блоге один из разработчиков Redux Toolkit, Марк Эриксон, рассказал об истории данного API и этапах его разработки. Разработка данной фичи была начата 2.5 года назад и потребовала много итераций, чтобы определить, какие варианты использования он должен охватывать, как должен выглядеть общедоступный API и как реализовать функциональность. В основе у Redux есть несколько основных библиотек для работы с сайд эффектами: - Thunks: отправить экшен, получить (dispatch, getState) в аргументах и выполнить любую логику внутри функции. - Sagas: напишите функцию генератор, которая на экшен вызывает сайд эффект функцию. - Observables: напишите RxJs пайплайн, который на экшен вызывает сайд эффект функцию. По умолчанию в Redux Toolkit был выбран Thunks, как самый простой вариант работы с сайд эффектами. При разработке API createListenerMiddleware команда Redux Toolkit хотела отделить экшены и сайд эффекты, т.е. смотрела в сторону redux-saga. Однако по сложности пользовательского API была цель сделать его близким к redux-thunk. https://blog.isquaredsoftware.com/2022/03/designing-rtk-listener-middleware/

2 674

Удивительные вещи, связанные с React Hooks https://dev.to/said_mounaim/awesome-things-related-to-react-hooks-30c4

2 674

Как React 18 может сломать ваше приложение Уже сейчас можно обновить библиотеку React до 18 версии, и разработчики утверждают, что обновление должно быть безболезненным. Однако, иногда после обновления могут происходить ошибки в приложениях. Связано это с новым режимом работы StrictMode. В dev режиме React будет делать проверку, автоматически размонтировать и повторно монтировать каждый компонент всякий раз, когда компонент монтируется в первый раз, восстанавливая предыдущее состояние стейтов при втором монтировании. Это необходимо, чтобы в будущем React мог удалять и восстанавливать секции UI с сохранением стейта. Например, при переключении табов на странице. Как работают эффекты в таком режиме:


* React mounts the component.
    * Layout effects are created.
    * Effect effects are created.
* React simulates effects being destroyed on a mounted component.
    * Layout effects are destroyed.
    * Effects are destroyed.
* React simulates effects being re-created on a mounted component.
    * Layout effects are created
    * Effect setup code runs

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


function useIsMounted() {
  const isMountedRef = React.useRef(true);
  React.useEffect(() => {
     return () => {
       isMountedRef.current = false;
     };
  }, []);
  return () => isMountedRef.current;
}

Например, хук выше определяет, смонтирован ли компонент. В React 18 данный хук будет работать неправильно, т.к. при проверке стабильности эффектов React будет несколько раз запускать и очищать useEffect. Чтобы исправить хук, нужно добавить присвоение в самом эффекте:


React.useEffect(() => {
  isMountedRef.current = true;  
  return () => {
          isMountedRef.current = false;
    };
}, []);

2 674

Производительность фронтенда: большое приложение на реактивном SSR-топливе Значительно повысить производительность можно при помощи серверного рендеринга, но какая будет цена у такой оптимизации? Какой инструмент выбрать — готовую библиотеку или собственное решение? Какие ограничения в дальнейшем могут быть вызваны выбором того или иного подхода? https://habr.com/ru/company/superjob/blog/660681/

2 674

Fiber изнутри: Обновления состояния и пропсов в React В этой статье используется базовая компоновка с родительским и дочерними компонентами для демонстрации внутренних процессов архитектуры Fiber, на которую опирается React для передачи пропсов в дочерние компоненты. https://indepth.dev/posts/1009/in-depth-explanation-of-state-and-props-update-in-react

2 674

Анимации с помощью React Анимация при наведении – прекрасный способ сделать приложение динамичным и отзывчивым. Это мелочь, но именно такие детали в итоге могут сделать продукт классным. Делимся статьей, где автор знакомит с паттернами архитектуры React. 👉Читать статью