June.

10월 안에는 꼭...

Portfolio

About

React flushSync()

2023/09/24
짧.

1 min read

React flushSync()

Locales:

en

ko

flushSync

1import { flushSync } from "react-dom"; 2 3// Handle updates synchronously using flushSync 4flushSync(() => { 5 doSomething(); // Do something to update 6}); 7 8// On this line, the Dom has been updated.

The flushSync function in the react-dom package is the method used to perform synchronous updates in React. Normally, updates in React are handled asynchronously, with changes in the update queue being processed in the next render cycle. However, the flushSync function allows you to immediately process updates in callbacks inside that method and proceed with rendering synchronously.

The roles and use cases for flushSync are as follows

  1. Synchronous rendering: flushSync allows you to bypass React's normal asynchronous update process and process updates immediately to render synchronously.
  2. User Experience: Used to minimize rendering delays that occur when rendering is handled asynchronously in certain situations. For example, this is useful when changes need to be reflected on screen immediately in response to user input.

Caution.

flushSync should be used with caution.

  1. Synchronous rendering is risky: Synchronous rendering can impact performance and, if used incorrectly, can make your application less responsive, so it should be used with caution.
  2. React 18: The flushSync function was introduced in React 18 and may not be available in earlier versions, so you should check its availability with your React version.
  3. Do I need it?: It's not common to use flushSync. If your app only uses the React API and doesn't integrate with third-party libraries, you probably don't need flushSync.
  4. Be careful if you use it with Suspense: If you use Suspense, flushSync can force a fallback state to be displayed.

관련 포스트가 4개 있어요.

useSyncExternalStore가 무엇일까?

짧.
react-use-sync-external-store cover image
2023/10/23 (updated)

React 18 useSyncExternalStore에 대해서

CSS flex box의 align-items의 flex-start와 baseline의 차이점에 대해서

짧.
css-flex-box-align-items-attributes cover image
2023/09/24

CSS에서 align-items의 flex-start와 baseline의 차이점

React 18.0.0 react-dom의 flushSync의 사용법과 주의사항에 대해서 알아보자.

짧.
react-flush-sync cover image
2023/09/24

React flushSync에 대해서

maxLength를 넣고 이모지를 넣으면 브라우저마다 계산되는 것이 다르다.

짧.
html-input-max-length cover image
2023/09/15

HTML `<input />`의 maxLength 동작이 safari에서 다른 이슈

profile

정현수.

Currently Managed

Currently not managed

© 2024. junghyeonsu all rights reserved.