Which version of React contains hooks?

Since 16.8.0, React has included stable implementations of React Hooks in the following modules:

  • React DOM
  • React Native
  • React DOM Server
  • React Test Renderer
  • React Shallow Renderer

Please note that to enable hooks, all React related packages must be upgraded to version 16.8.0 or higher. If you forget to update a package such as React DOM, the Hook will not work.

React Native 0.59 and above support hooks.

What can a Hook do that a class can’t?

Hooks provide a powerful and expressive way to reuse functionality between components. By “custom Hook”. This post from a member of the React core team takes a deeper look at what new capabilities hooks unlock.

Should I use Hook, class, or a mix of both?

You can’t use a Hook inside a class component, but you can certainly mix a class component with a function component that uses a Hook in the component tree. Whether a component is a class or a function that uses hooks, these are only implementation details of the component.

Can hooks cover all usage scenarios of classes?

The goal set by the Hook is to cover all usage scenarios of the class as early as possible. There are currently no Hook equivalents for the less commonly used getSnapshotBeforeUpdate, getDerivedStateFromError, and componentDidCatch lifecycles. At present, Hook is still in the early stage, and third-party libraries are not fully compatible with Hook.

Will hooks replace render props and high-level components?

Render props and high-level components render only one child node (for example, a virtual scroll bar component might have a renderItem property, or a visible container component might have its own DOM structure). But in most cases, hooks are sufficient and can help reduce nesting.

The hooks for the storyconnect()What does that mean in terms of popular apis like React Router?

React Redux has supported the Hook API since V7.1.0 and exposed hooks such as useDispatch and useSelector. The React Router has supported hooks since V5.1, and other third libraries will support hooks soon.

Is it safe to omit functions from the dependency list?

function Example({ someProp }) { function doSomething() { console.log(someProp); } useEffect(() => { doSomething(); }, [dependencies should be filled in]); // 🔴 is not safe (it calls' doSomething 'using' someProp ')}Copy the code

If the dependencies are not written, useEffect may not execute the updated function or may not execute the updated function, costing code performance.

How do I do thatshouldComponentUpdate?

You can use react.memo to wrap a component with props:

Const Button = react.memo ((props) => {// component compare old and new dependencies to show different components});Copy the code

Will hooks be slowed down by creating functions at render time?

In modern browsers, the raw performance of closures and classes differs significantly only in extreme scenarios.

  • Hooks avoid the extra overhead of classes, such as the cost of creating class instances and binding event handlers in constructors.
  • Language-conforming code does not need to be deeply nested in the component tree when using hooks. This phenomenon is very common in code bases that use high-level components, render props, and context. The component tree is smaller and React work is reduced.

The performance impact of using inline functions in React has to do with how passing a new callback every time you render breaks the shouldComponentUpdate optimization for a child component. Hook solves this problem in three ways.

// Unless 'a' or 'b' changes, Const memoizedCallback = useCallback(() => {doSomething(a, b); }, [a, b]);Copy the code

  • UseMemo hooks make it easier to control when specific child nodes are updated, reducing the need for pure components.

  • UseReducer Hook reduces reliance on deep passing callbacks.