[React] Avoiding state flickers

Posted answer1215

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了[React] Avoiding state flickers相关的知识,希望对你有一定的参考价值。

As a user, it can be very disorienting when the "wrong" UI is briefly shown to the user: a login link is shown to an authenticated user, or a 404 error flashes before the page loads correctly. This issue is common in Gatsby applications, because of how Gatsby pre-builds html files.

In this video, we show how issues like this can slip through, and how we can solve the problem by skipping user-specific state during the build. Instead, we‘ll leave that spot blank, and fill it in later on the client, when we know what should go there.

While this tutorial uses Gatsby, the same lesson can be applied to Next.js, or any server-rendered React application.

Learn more about the nitty-gritty in this blog post

 

import React from react;

const ClientOnly = ({ children }) => {
  const [
    hasMounted,
    setHasMounted,
  ] = React.useState(false);

  React.useEffect(() => {
    setHasMounted(true);
  }, []);

  if (!hasMounted) {
    return null;
  }

  return children;
};

export default ClientOnly;

 

Problem for flicker:

We fetch the state from backend or localstorage, so during the first render, our applciation might render a default state, after response coming back, we render another state. it causes flicker.

The tick is ‘‘useEffect‘ runs after every rendering including the first, so after first render, we set ‘hasMounted‘ to true. So for the first rendering, it return ‘null‘ to prevent rendering anything to the screen.

 

以上是关于[React] Avoiding state flickers的主要内容,如果未能解决你的问题,请参考以下文章

react-native-easy-app 详解与使用之 View,Text,Image,Fl

[AtCoder arc090E]Avoiding Collision

[Javascript] Avoiding Mutations in JavaScript with Immutable Data Structures

如何将属性值转换为键? [复制]

react父亲怎么获取子组件的state

React自制全家桶React中state与props的分析与比较