About React Hooks

P1. Personal Summary

React Hooks is the latest exploration of "reuse" by the React team. Before the emergence of React Hooks, developers generally reused logic through mixins, higher-order components (HOC), Render Props, etc., but these methods have some disadvantages : (❌ indicates the problems they do not solve, share a summary of these reuse solutions )

	mixins	HOC	Render Props
The source of the data is not clear	❌	❌	✅
namespace conflict	❌	❌	✅
ES6 does not support	❌	✅	✅
Difficult to scale	❌	❌	-
Wrapper/callback hell	✅	❌	✅

In addition to the logic reuse method, the React team also raised other problems with React at React Conf 2018:

1. When components become huge, reuse logic divided by life cycle becomes difficult to track
2. Obscure Class syntax (not only for humans, but also for compilers)

For example, when loading the sdk in Class Component, the subscription operation is usually performed in componentDidMount , and the unsubscribe operation is performed in componentWillUnmount :

 class App extends React.Component {
    componentDidMount() {
        sdk.subscribe()
    },
    componentWillUnmount() {
        sdk.unsubscribe()
    }
}

But with the increase of sdk, these codes will appear very fragmented:

 class App extends React.Component {
    componentDidMount() {
        sdk1.subscribe()
        sdk2.subscribe()
        sdk3.subscribe()
        // etc...
    },
    componentWillUnmount() {
        sdk1.unsubscribe()
        sdk2.unsubscribe()
        sdk3.unsubscribe()
        // etc...
    }
}

In the process of subsequent maintenance, whether there is a certain sdk usage that needs to be changed or the sdk-related code is removed, it must be searched in different life cycles.

Class Component itself has some problems:

1. Must call super(props) , very annoying
2. The method needs to bind this manually, which is more annoying
3. At the compilation level, the amount of code of Class increases sharply after Babel is compiled

Therefore, with the development of React, the React team is more inclined to let developers switch from Class Component to Function Component, but the original Function Component did not support state or life cycle, so it was difficult to meet the actual development needs. React Hooks came into being

The introduction to Hooks on the official website is as follows:

Hooks are a new addition in React 16.8. They let you use state and other React features without writing a class . From the second half of the sentence without writing a class you can see how the React team's attitude towards Function Component

The basic usage of Hooks will not be introduced here. Using the combination of Function Component + Hooks can say goodbye to the annoying super and this problems, and for the life cycle splitting problem of Class Component, it can also be elegantly solved by custom Hook:

 // 复用逻辑通过自定义 hook 封装
function useSDK1() {
    useEffect(() => {
        sdk1.subscribe()

        return () => sdk1.unsubscribe()
    }, [])
}

function useSDK2() {
    useEffect(() => {
        sdk2.subscribe()

        return () => sdk2.unsubscribe()
    }, [])
}

function App() {
    // use sdk
    useSDK1()
    useSDK2()
}

At the same time, for the compiler, the function components are all functions, which is convenient for the compiler to optimize.

Of course React Hooks also have disadvantages:

1. Can only be used in Function Component
2. Only use hooks at the top level
3. For hooks with deps, such as useEffect, useCallback, etc., deps must be handled correctly, otherwise problems will occur

Regarding the downsides of React Hooks, Dan says in Why Do React Hooks Rely on Call Order?: "Hooks aren't perfect either, but they're the best compromise we've found to solve these problems". Moreover, in response to the problem that React needs to manually write a large number of memo codes to improve performance, the React team shared the React Forget project at React Conf 2021. By discovering the places that need to be optimized during the compilation stage, memo is automatically added. I believe that the React team will make hooks more and more it is good

P2. Interview related

React's Fiber and Hooks are the must-have points in the interview, and the diff algorithm is close behind. For Hooks, interviewers generally ask Hooks to solve those problems first, which can be answered in two ways:

1. Make up for the lack of state and lifecycle mechanism of Function Component compared to Class Component
2. In terms of code reuse, it solves the problems of other reuse solutions (wrapper/callback hell, split life cycle)
3. The convenience of testing is also a point, you can mention it

If the interviewer asks what are the disadvantages of Hooks, you can talk about the limitations of Hooks in use:

1. Can only be used in Function Component
2. Only use hooks at the top level
   Finally, I can add, why there are these problems, the thinking of the React team on the design of Hooks, including some optimization actions of the React team for these problems, these will be bonus points

P3. References

• React evolution evolution and evolution
• React without memo
• React Today and Tomorrow and 90% Cleaner React With Hooks