React

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

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

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

Как проектировалось мидлвар подписки для 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/

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

Как 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; }; }, []);

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

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

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