Notice: file_put_contents(): Write of 16980 bytes failed with errno=28 No space left on device in /var/www/tgoop/post.php on line 50
Frontender Libs - обзор библиотек JS / CSS@sWebDev P.3608
SWEBDEV Telegram 3608
Управление асинхронным рендерингом

Метод 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



tgoop.com/sWebDev/3608
Create:
Last Update:

Управление асинхронным рендерингом

Метод 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

BY Frontender Libs - обзор библиотек JS / CSS




Share with your friend now:
tgoop.com/sWebDev/3608

View MORE
Open in Telegram


Telegram News

Date: |

Users are more open to new information on workdays rather than weekends. Select “New Channel” Some Telegram Channels content management tips Find your optimal posting schedule and stick to it. The peak posting times include 8 am, 6 pm, and 8 pm on social media. Try to publish serious stuff in the morning and leave less demanding content later in the day. In the “Bear Market Screaming Therapy Group” on Telegram, members are only allowed to post voice notes of themselves screaming. Anything else will result in an instant ban from the group, which currently has about 75 members.
from us


Telegram Frontender Libs - обзор библиотек JS / CSS
FROM American