嘗試一下useStateOnce, 當你試着初始化一個重狀態的時候

若是客官喜歡就點一顆小星星吧, 謝謝啦^_^.

動機

升級react useState鉤子函數能力，讓狀態只被初始化一次，特殊適合傳入一些比較重的狀態場景使用，從而節省函組件重複渲染期間初始化重狀態的開銷。

傳統的useState

若是用戶傳入一個重狀態給useState,在每一渲染期間都會被初始化。

import React, { useState } from "react";

function Demo() {

  const [heavyState] = useState(Array(1000000));
  return <h3>{heavyState.length}</h3>;
}
複製代碼

使用useStateOnce

useStateOnce 接受一個普通狀態和函數型狀態，當用戶傳遞函數型狀態時，該函數只在組件初次渲染期間執行一次，因此你完徹底全能夠使用useStateOnce完全代替useState

import React from "react";
import useStateOnce from "use-state-once";

const state = () => {
  console.log("this function will only been called one time");
  return Array(1000000);
};

function Demo() {
  const [heavyState, setHeavyState] = useStateOnce(state);
  return <h3>{heavyState.length}</h3>;
}
複製代碼

useStateOnce 在線示例

Concent也提供此能力

Concent's 的useConcent接口和useStateOnce有一樣的效果當用戶傳遞狀態函數做爲參數時。

useConcent 在線示例

若是你打開了CodeSandbox, 你還能夠拷貝其餘文件的內容到App.js裏，以便了解更多的concent有趣特性。