Сохранение данных формы в React: современный подход с Nuqs
В веб-разработке часто требуется сохранять состояние форм, чтобы предотвратить потерю данных при обновлении страницы или поделиться заполненной формой с другими. Традиционные методы, такие как
👉 @sWebDev
В веб-разработке часто требуется сохранять состояние форм, чтобы предотвратить потерю данных при обновлении страницы или поделиться заполненной формой с другими. Традиционные методы, такие как
localStorage
, имеют ограничения, включая невозможность совместного использования данных и отсутствие встроенной валидации. Nuqs предлагает современное решение, позволяя сохранять состояние формы в URL с поддержкой типизации и валидации. Это упрощает обмен данными и устраняет необходимость в серверной инфраструктуре. Если вы хотите улучшить управление состоянием форм в своих React-приложениях, ознакомьтесь с возможностями Nuqs.👉 @sWebDev
👍3
Vanilla-tilt.js
Vanilla-tilt.js — это легковесная библиотека, позволяющая добавлять эффект 3D-наклона к элементам на странице. Она реагирует на движения мыши, создавая плавные анимации без лишних зависимостей.
👉 @sWebDev
Vanilla-tilt.js — это легковесная библиотека, позволяющая добавлять эффект 3D-наклона к элементам на странице. Она реагирует на движения мыши, создавая плавные анимации без лишних зависимостей.
👉 @sWebDev
👍3
Какой первый аргумент передаётся в FormControl?
Что передаётся в
Забыли? Вернитесь к посту от03.03.2025 .
👉 @sWebDev
Что передаётся в
FormControl
первым аргументом?Забыли? Вернитесь к посту от
👉 @sWebDev
👍2
Что передаётся в FormControl первым аргументом?
Anonymous Quiz
43%
Название поля.
14%
Тип данных.
12%
Валидатор.
31%
Начальное значение.
👍4
Управление асинхронным рендерингом
Метод
Например, кнопка изменяет текст элемента, и нам нужно получить его новую ширину до следующего рендера:
👉 @sWebDev
Метод
flushSync()
позволяет немедленно обновить состояние и выполнить ререндер, обходя пакетную обработку обновлений. Это полезно, когда требуется мгновенно обновить интерфейс перед выполнением других операций, например, чтением размеров DOM. Например, кнопка изменяет текст элемента, и нам нужно получить его новую ширину до следующего рендера:
import { useState } from "react";
import { flushSync } from "react-dom";
function Example() {
const [text, setText] = useState("Нажми меня");
const spanRef = useRef(null);
function handleClick() {
flushSync(() => {
setText("Текст изменился!");
});
console.log("Ширина:", spanRef.current.offsetWidth);
}
return (
<div>
<button onClick={handleClick}>Изменить</button>
<span ref={spanRef}>{text}</span>
</div>
);
}
flushSync()
гарантирует, что offsetWidth
обновится после изменения текста, а не после следующего рендера. 👉 @sWebDev
👍5
This media is not supported in your browser
VIEW IN TELEGRAM
Когда на собеседовании спрашивают, ты фронт или бек, а ты до сих пор гуглишь, как центрировать div.
👍 – Издержки универсальности!
❤️ – Я думал, это они мне скажут кто я.
👉 @sWebDev | #юмор
👍 – Издержки универсальности!
❤️ – Я думал, это они мне скажут кто я.
👉 @sWebDev | #юмор
❤9👍6🤔1
Window-Engine
Window-Engine — библиотека для создания перетаскиваемых окон без зависимостей. Позволяет реализовать многозадачный интерфейс в веб-приложениях, сохраняя взаимодействие адаптивным, включая поддержку сенсорных экранов.
👉 @sWebDev
Window-Engine — библиотека для создания перетаскиваемых окон без зависимостей. Позволяет реализовать многозадачный интерфейс в веб-приложениях, сохраняя взаимодействие адаптивным, включая поддержку сенсорных экранов.
👉 @sWebDev
🔥4
API captureOwnerStack
В React появился экспериментальный API
👉 @sWebDev
В React появился экспериментальный API
captureOwnerStack
, который помогает разрабатывать более удобные ошибки. Он позволяет получить стек владельцев (Owner Stack) — список компонентов, через которые передаётся проп. Это полезно, если нужно быстро понять, какой компонент несёт ответственность за данные в сложной структуре. Работает только в режиме разработки и может измениться в будущих версиях. Если ваш код ломается, а виновника не найти, этот API поможет разобраться. 👉 @sWebDev
👍2
ScrollSpy.js
ScrollSpy.js — это легковесная библиотека для отслеживания появления элементов в области просмотра. Она позволяет удобно активировать анимации, загружать контент или изменять состояние элементов при прокрутке страницы.
👉 @sWebDev
ScrollSpy.js — это легковесная библиотека для отслеживания появления элементов в области просмотра. Она позволяет удобно активировать анимации, загружать контент или изменять состояние элементов при прокрутке страницы.
👉 @sWebDev
👍3
Работа с resolveForwardRef()
Что делает
Забыли? Вернитесь к посту от10.03.2025 .
👉 @sWebDev
Что делает
resolveForwardRef()
при передаче ему объекта?Забыли? Вернитесь к посту от
👉 @sWebDev
👍2
Что делает resolveForwardRef() при передаче ему объекта?
Anonymous Quiz
65%
Разворачивает forwardRef() и возвращает оригинальное значение.
8%
Добавляет новый провайдер в Injector.
15%
Откладывает загрузку зависимости до первого вызова.
12%
Принудительно пересоздаёт зависимость в Injector.
👍3
Принудительный ререндер в React
В React метод
Обычно React группирует обновления в батчи, но иногда требуется мгновенный ререндер.
👉 @sWebDev
В React метод
flushSync()
немедленно обновляет состояние и ререндерит компонент, обходя пакетирование. Это полезно, когда нужно сразу отобразить изменения перед выполнением других операций, например, измерения размеров DOM-элемента. Обычно React группирует обновления в батчи, но иногда требуется мгновенный ререндер.
import { useState, useRef } from "react";
import { flushSync } from "react-dom";
function Example() {
const [text, setText] = useState("Исходное значение");
const spanRef = useRef(null);
function handleClick() {
flushSync(() => {
setText("Обновлённое значение");
});
console.log("Ширина:", spanRef.current.offsetWidth);
}
return (
<div>
<button onClick={handleClick}>Изменить</button>
<span ref={spanRef}>{text}</span>
</div>
);
}
flushSync()
гарантирует, что offsetWidth
обновится сразу после изменения текста. 👉 @sWebDev
👍3❤1🔥1