useEffect 重新渲染太多次

Question

我有这个组件，它需要获取数据，将其设置为状态，然后将其传递给子项。一些数据也需要在上下文中设置。我的问题是使用 useEffect，一旦调用 API，它将为我需要执行的每个 setvalue() 函数重新渲染。我尝试将一个空的 [] 数组传递给 useEffect，但由于状态正在改变，仍然获得相同数量的重新渲染。目前该数组包含 set...functions 以防止 eslint 抛出警告。

有没有更好的方法来避免这么多次重新渲染？

const Home = (props) => {

  console.log("TCL: Home -> props", props);
  const classes = useStyles();
  const [value, setValue] = React.useState(0);


  //CONTEXT
  const { listSavedJobs, setListSavedJobs, setIsFullView} = useContext(HomeContext);
  const {
    setUserName,
    setUserLastName,
    setUserEmail,
    setAvatarProfile,
  } = useContext(UserContext);

  // STATE
  const [searchSettings, setSearchSettings] = useState([]);
  const [oppData, setOppData] = useState([]);
  const handleChange = (event, newValue) => {
    setValue(newValue);
  };


  const handleChangeIndex = index => {
    setValue(index);
  };


  //API CALLS
  useEffect(() => {
    const triggerAPI = async () => {

      setIsFullView(false);

      const oppResponse = await API.getOpportunity();
      if(oppResponse){
        setOppData(oppResponse.response);
      }
      const profileResponse = await API.getUserProfile();
      if(profileResponse){
        setUserName(profileResponse.response.first_name);
        setUserLastName(profileResponse.response.last_name);
        setUserEmail(profileResponse.response.emailId);
      }
      const profileExtData = await API.getUserProfileExt();
      if(profileExtData){
        setAvatarProfile(profileExtData.response.avatar);
        setListSavedJobs(profileExtData.response.savedJobs);
        setSearchSettings(profileExtData.response.preferredIndustry);
      }
    };
    triggerAPI();

  }, [ 
    setOppData,
    setUserName,
    setUserLastName,
    setUserEmail,
    setAvatarProfile,
    setListSavedJobs,
    setIsFullView,
  ]);

...```

Answer 1

仅将一个空数组传递给 的第二个参数useEffect。

笔记

React 保证 setState 函数标识是稳定的，并且不会在重新渲染时发生变化。这就是为什么从 useEffect 或 useCallback 依赖项列表中省略是安全的。 来源

编辑：试试这个以避免重新渲染。谨慎使用