zoukankan      html  css  js  c++  java
  • [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.

  • 相关阅读:
    MySQL 查询各科前三的数据
    MySQL 分时间段查询
    MySQL 查询同一字段中同时满足多个条件
    MySQL 分组累加
    快速搭建LNMP
    打开页面默认弹出软键盘,同时兼容iOS和Android
    linux 系统的ssh服务
    linux 磁盘
    linux系统基础网络配置
    discuz中方法
  • 原文地址:https://www.cnblogs.com/Answer1215/p/12440517.html
Copyright © 2011-2022 走看看