🗂4 пользовательских хука React.

1. useMount
Следует настроить хук под названием useMount. Тогда функция обратного вызова будет выполняться только при первом рендеринге компонента.

Исходный код:
const useMount = (callback) => {
React.useEffect(callback, [])
}

Пример:
const UseMountDemo = () => {
const [count, setCount] = React.useState(0)

useMount(() => {
console.log("useMount")
})

return (
<div>
count: { count }
<button onClick={() => setCount(count++)}>add</button>
</div>
)
}

Когда компонент рендерится повторно, useMount не выполняется снова.

2. useUnmount
Можно разработать хук useUnmount, чтобы указать, что функция обратного вызова выполняется, когда компонент размонтирован.

Исходный код:
const useUnmount = (callback) => {
React.useEffect(() => {
return callback
}, [])
}
Пример:
const Child = () => {
const [ count, setCount ] = useState(0)

useUnmount(() => {
// Мы ожидаем вывод значения num, когда компонент будет размонтирован
console.log('useUnmount', count)
})
return (
<div>
count: {count}
<button onClick={() => setCount(count + 1)}>add</button>
</div>
)
}

const UseUnmountedDemo = () => {
const [showChild, setShowChild] = React.useState(true);
// Мы используем "showChild" для управления отображением и скрытием дочернего компонента
return (
<div>
{ !!showChild && <Child /> }
<button onClick={() => setShowChild(false)}>Destroy child</button>
</div>
)
}
Когда компонент Child удаляется, функция обратного вызова useUnmount выполняется, но обнаруживается, что count  —  это начальное значение 0, а не 10. Что вызывает такой неправильный результат?

Причина этого кроется в механизме закрытия в useEffect, потому что функция передается при выгрузке компонента для первого рендеринга. Чтобы получить состояние в реальном времени, нужно использовать useRef.
const useUnmount = (callback) => {
const callbackRef = React.useRef(callback)

callbackRef.current = callback

React.useEffect(() => {
return () => {
callbackRef.current()
}
}, [])
}
Теперь при удалении компонента получаем правильное значение count

3. useContext
Иногда необходимо выполнять логический код только после изменения зависимости. Можно ли мы достичь этой цели, используя такой подход?
function UseUpdateEffectDemo() {
const [count, setCount] = React.useState(0)

React.useEffect(() => {
console.log('count changed', count)
}, [ count ])

return (
<div>
count: {count}
<button onClick={() => setCount(count + 1)}>change</button>
</div>
)
}
Однако count выведет 0, как только компонент будет смонтирован. Как можно выполнить функцию обратного вызова после изменения count?
const useUpdateEffect = function (effectCallback, deps = []) {
const isFirstMount = React.useRef(false)

React.useEffect(() => {
return () => {
isFirstMount.current = false
}
}, [])
React.useEffect(() => {
// Не выполняйте effectcallback для первого раза
if (!isFirstMount.current) {
isFirstMount.current = true
} else {
return effectCallback()
}
}, deps)
}

function UseUpdateEffectDemo() {
const [count, setCount] = React.useState(0)

useUpdateEffect(() => {
console.log('Count changed', count)
}, [ count ])

return (
<div>
count: {count}
<button onClick={() => setCount(count + 1)}>change</button>
</div>
)
}

4. useSetState

▪ Читать продолжение

@react_tg

Grid 3d card tilt effect — карточки с эффектом объема при наведении. Реализованы с помощью CSS и JavaScript.

https://codepen.io/ghaste/pen/zYJqxax

@react_tg

React.js
Design Patterns

Год: 2023
Автор: Aleksandra Desmurs-Linczewska
Publisher: Bpb
Формат: EPUB

📚 Скачать книгу

@react_tg

Circular Corner Borders 3D Hover Image (CSS Only) - Эффект при наведении на карточку, выполненный на чистом CSS, без использования JavaScript

https://codepen.io/TheMOZZARELLA/pen/OJOOVVJ

@react_tg

Gallery Example - Крутая Галерея картинок в стиле киберпанк.

https://codepen.io/toshiya-marukubo/pen/gOKMvPZ

@react_tg

​Самый безопасный способ скрыть ключи API при использовании React

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

Подробнее:

https://www.smashingmagazine.com/2023/05/safest-way-hide-api-keys-react/

#фронтенд #react

📚10 лучших библиотек React для разработки высокопроизводительных веб-приложений.

1. React Native
React Router - это популярная библиотека для управления навигацией в React-приложениях. Она позволяет задавать маршруты и URL декларативно, а также предоставляет возможности вложенных маршрутов и динамического согласования.

2. Redux
Redux - это контейнер состояний для JavaScript-приложений, который позволяет разработчикам предсказуемо и масштабируемо управлять сложной логикой состояния. Он интегрируется легко с React и обеспечивает центральное хранилище для состояния приложения, которое может быть использовано в нескольких компонентах.

3. React Router
React Router - популярная библиотека для управления навигацией в React-приложениях. Она позволяет декларативно определять маршруты и URL, а также предоставляет возможности вложенных маршрутов и динамического согласования маршрутов. React Router интегрируется с другими React-библиотеками, включая Redux, что делает ее мощным инструментом для создания сложных веб-приложений.

4. React Query
React Query - библиотека для получения и кэширования данных в React-приложениях. Она обеспечивает удобный интерфейс для получения данных и управления их жизненным циклом. React Query также поддерживает пагинацию, поллинг и рендеринг на сервере, что делает ее универсальным инструментом для создания высокопроизводительных веб-приложений.

5. React Bootstrap
React Bootstrap - библиотека компонентов пользовательского интерфейса для React-приложений, основанная на фреймворке Bootstrap. Она предлагает предварительно встроенные компоненты, включая кнопки, формы, модалы и оповещения, и оптимизирована для использования с React.

6. Material UI
Material UI - библиотека с готовыми компонентами пользовательского интерфейса, основанными на Google Material Design. Она включает кнопки, карточки, формы, иконки и другие компоненты. Material UI легко настраивается и подходит для создания привлекательных и отзывчивых интерфейсов.

7. Styled Components
Styled Components - это библиотека для стилизации React-компонентов, позволяющая писать CSS в коде JavaScript с использованием мощного и интуитивно понятного API. Она также предоставляет возможность создавать темы и управлять настройками, а также оптимизирует производительность CSS путем уменьшения размера сгенерированного кода.

8. React Virtualized
React Virtualized - библиотека для эффективного рендеринга больших наборов данных в React-приложениях, позволяющая осуществлять бесконечную прокрутку и ленивую загрузку. Она также обрабатывает динамическое изменение размеров и оптимизирована для высокой производительности.

9. React Testing Library
React Testing Library — это библиотека для тестирования React-приложений, которая предлагает простой API для тестирования компонентов и их взаимодействия с пользователем. Она фокусируется на тестировании поведения приложения с точки зрения пользователя и помогает написать устойчивые тесты, не зависящие от изменений в базовой реализации. React Testing Library помогает улучшить качество React-приложения и написать хорошие тесты.

10. Framer Motion
Framer Motion - библиотека для анимации в React, с простым API и поддержкой различных типов анимации, включая ключевые кадры, переходы и физическую анимацию. Также позволяет создавать сложные взаимодействия на основе жестов.

@react_tg

Checkbox Animations With Indeterminate State - Анимированный checkbox, выполненный с помощью SVG, CSS и JavaScript

https://codepen.io/jkantner/pen/BaJmyjo

@react_tg

🔥 Как реализовать функциональность перетаскивания с помощью React Beautiful Dnd

Представьте себе следующее: вы используете приложение для управления проектами, без усилий перетаскивая задачи своей команды из одной колонки в другую по мере изменения приоритетов. Это плавное взаимодействие кажется почти волшебным и к тому же создает интуитивно понятный и визуально привлекательный пользовательский опыт. Но задумывались ли вы когда-нибудь, как можно воссоздать это волшебство в собственных React-приложениях? Вот тут-то на помощь приходит React Beautiful Dnd — библиотека, которая позволяет легко реализовать функциональность перетаскивания.

В этой статье мы совершим глубокое погружение в мир библиотеки React Beautiful Dnd. Я расскажу о том, как она может преобразить веб-приложения, добавив бесшовное и визуально привлекательное взаимодействие перетаскивания (drag-and-drop). Это руководство будет полезно как опытным React-разработчикам, так и новичкам, желающим расширить свой набор навыков. Оно вооружит вас знаниями и инструментами, необходимыми для создания интерактивных веб-приложений, которые порадуют пользователей.

Приготовьтесь овладеть искусством создания операций перетаскивания с использованием возможностей библиотеки React Beautiful Dnd!

▪ Читать

@react_tg