React conf 2021 관심 주제(Suspense/Automatic batching/React without memo) 요약

12월 9일 React conf 2021 이벤트가 열렸습니다!!
React Suspense
역시 리액트18의 주요 내용은 Suspense죠.
드디어 사용가능Suspense...!!!
React Suspense란 무엇입니까?
지금까지 비동기 API로 데이터를 얻었을 때 다음 코드를 쓴 적이 없습니까?

export const List = () => {
  const [items, isLoading] = useData(...);

  if (isLoading) return <Loading />;

  return items.map(item => (
    <li>{item.something}</li>
  ));
}

이 구성 요소는 다음과 같은 일을 진행하고 있다.

데이터 확보

데이터가 부하 상태일 때 Loading 구성 요소의 표시

얻은 데이터의 표시

하지만 다음 두 개는 같은 곳에 있을 필요가 없다.

데이터 획득

부하 상태의 처리

이유는 다음과 같다.

데이터를 가져올 때 항상 부하 상태를 되돌려야 한다

모든 구성 요소 내에서 데이터 추가/삭제와 같은 변화가 발생할 때 매번 불러오는 상태가 어떠한지 고려해야 한다

부하 상태가 어떠한지 데이터와 너무 많이 관련이 있음

이러한 문제를 해결하는 것은 Suspense입니다.

// 子コンポーネント(<List />)の準備ができているか検知し、できていなかったら<Loading />を表示する
export const Page = () => {
  return (
    <Suspense fallback={<Loading />} >
      <List />
    </Suspense>
  )
}

// ここでローディングなのかを知る必要がない
export const List = () => {
  const [item] = useData(...);

  return items.map(item => (
    <li>{item.something}</li>
  ));
}

준비된 children 가 없으면 fallback에 정의된 구성 요소를 표시합니다.Suspense에서'데이터 준비됐나'가 아니라'JSX 준비됐나'라는 생각으로 바뀐 것이다.
따라서 데이터의 종속성과 구성 요소의 종속성에 관계없이 슬라이더와 드러머 등의 준비 상태의 UI를 표시할 수 있습니다.
▶ 참조
Automatic batching
지금까지 다음과 같이 set 함수를 세 개 썼으면 세 번 더 render가 도망갔어요.

const handleClick = () => {
  setIsFetching(false)
  setError(null)
  setFormStatus('success')
}

그러나 set 함수라고 불릴 때마다 나타나는 것은 아니다
함수의 끝만 실행합니다.
즉, handleClick 렌더링 한 번만 하면 됩니다!
▶ 참조
React without memo
React Forget이라는 연구 프로젝트에 의해 발표됐다.
아직 진행 중인 프로젝트로 아직 발표되지 않았다.
도대체 무엇이 필기화입니까?이런 분들은 아래 기사를 참고하세요.(고지)
필기화를 통해 불필요한 재작성을 줄이고 사용자에게 좋은 체험을 선사할 수 있다.
다른 한편, 데이터의 의존 관계와 참조의 동일성을 고려하여 기록해야 하기 때문에 개발자는 많은 것을 고려하고 코드의 양도 증가한다.
UX와 DX...어떻게 하면 이 두 가지 컨디션을 모두 좋아지게 할 수 있을까.
그래서 필기화하는 방법을 다시 연구했다고 한다.
대전제useMemo 또는 useCallback 수신props 또는 state 입력
UI 또는 효과 등으로 출력되는 함수에 불과합니다.
useMemo의 재연구

const filtered = useMemo(
  () => getFiltered(todos, visibility),
  [todos, visibility]
)

useMemo가 한 일은 이전 캐시 표현값과 비교합니다
수치가 변경되면 다시 실행하고 수치가 변경되지 않으면 그대로 유지한다.

let hasVisibilityChanged, hasTodosChanged, memoCache;

let filtered;
if (hasVisibilityChanged || hasTodosChanged) {
  filtered = memoCache[1] = getFiltered(todos, visibility)
} else {
  filtered = memoCache[1]
}

useCallback의 재연구

const handleChange = useCallback(
  todo => setTodos((todos) => getUpdated(todos, todo)),
  []
)

useCallback에서 지난번 값이 없으면 캐시만 생성됩니다.

const handleChange =
  memoCache[0] ||
  (memoCache[0] = (todo) => setTodos((todos) => getUpdated(todos, todo)));

이러한 구조를 사용하면 함수, 값, 심지어jsx 등을 자동으로 기억할 수 있다
미래의 리액트로 가져온 것 같아!!
데모가 생겼어.
▶ 동영상 링크
기대된다!!나는 이 연구가 순조롭게 진행되기를 바란다.
이것들은 React Conf의 일부일 뿐입니다!!
이 슬라이드에는 모든 비디오가 정리되어 있으므로 꼭 보십시오.