current position:Home>Exploring the future development mode of react from a PR

Exploring the future development mode of react from a PR

2021-08-26 21:49:45 calzone

Hello everyone , I'm Carson .

All say Hooks yes React The future of , but Hooks What are your best practices ?

About this knowledge , The official documents don't mention... At all .

So in the actual project , Problems like the following often occur :

// ...
useEffect(() => {
  fetchData(a, b).then(
    // ...
}, [a, b])

useEffect Rely on a b Two states , When any one of them changes, it will execute fetchData Request data .

When the application becomes complex , Keep track of ab When change becomes more and more difficult .

Adjust the interface over time ,fetchData Status is also required c As a parameter . Then the difficulty of tracking state changes will be further improved .

Will eventually lead to :

  • Light is meaningless fetchData Multiple calls
  • The most important thing is that the logic is difficult to trace bug

A friend will say : You can package Customize Hook ah .

This just hides the problem deeper ......

How to solve this problem

The essential reason for the above problems is : side effect It's too much , It can be regarded as side effect There are too many things . This leads to useEffect Be abused .

therefore , To solve the problem of abuse , For different types side effect Provide official solutions .

such , Specific problems have specific solutions , No useEffect A shuttle .

From a PR See change

lately React There is a very humble PR

In general, it means :

Before , When you are in a component that has been uninstalled (unmounted) Call in setState It will trigger a warning, This PR This... Will be removed warning.

for instance , The following code is in the component mount Sign up for handleChange

useEffect(() => {
  function handleChange() {
  return () => store.unsubscribe(handleChange)
}, [])

If you forget to write this line of unbinding code :

return () => store.unsubscribe(handleChange)

After the component is unloaded handleChange May also be called , And then call setState.

This is a potential memory leak .

Prior to React in , This behavior will report warning.

Then why remove the warning Well ?

PR Behind the

One side , This warning There is a certain probability of misjudgment , such as Click the button to submit the form

async function handleSubmit() {
  await post('/someapi')

Call after clicking the button setPending Trigger loading The icon shows , And then launch post request .

It is possible that the component is uninstalled before the request returns , This will call :


There is no risk of memory leakage , But it will report warning.

however warning There is another more essential reason for removal :

In the first example , We are useEffect Call in store.subscribe, This behavior can be classified as :

Subscribe to external sources in components

What is? External sources Well ?

whatever Change is not affected by React Source of control All are External sources .

such as :

  • Various third-party state management Libraries
  • hope location.hash Changes trigger component updates

In the future, all such behaviors will converge to useMutableSource This Hook in .

More examples

Another example , about I/O operation ( such as Request data ) Everyone will put this in useEffect Logic in , Future use resource combination Suspense Maybe a better choice :

const resource = fetchDetail();

function Page() {
  return (
    <Suspense fallback={<h1>Loading...</h1>}>

function Details() {
  const data =;
  return <h1>{}</h1>;

In the example above , call fetchDetail Will initiate a data request .

Details Component calls Direct consumption data .

If the data has not been returned , The view renders the most recent Suspense Of fallback( namely <h1>Loading...</h1>).


side effect It's diverse , I didn't have a choice before , Only use useEffect.

With React18 The stability of the , Face different side effect scene , There will be a clearer solution .

When the , May finally usher in Hooks The age of true fragrance ......

copyright notice
author[calzone ],Please bring the original link to reprint, thank you.

Random recommended