React 16.7 has State Hook, can I use functional component instead of class component in any situation?

Question

React 16.7 has State Hook,so I can use function component instead of class component in any situation,is it right? https://reactjs.org/docs/hooks-state.html

Answer 1

Actually,there are some rules when you use hook:Don’t call Hooks inside loops, conditions, or nested functions and Don’t call Hooks from regular JavaScript functions.

You can read these rules and explanation here: https://reactjs.org/docs/hooks-rules.html

And here is the official explaination.

Our goal is for Hooks to cover all use cases for classes as soon as possible. There are no Hook equivalents to the uncommon getSnapshotBeforeUpdate and componentDidCatch lifecycles yet, but we plan to add them soon. It is a very early time for Hooks, so some integrations like DevTools support or Flow/TypeScript typings may not be ready yet. Some third-party libraries might also not be compatible with Hooks at the moment.

Answer 2

useState hook is intended to be a replacement for this.state in class components:

this.state = { foo: 1, bar: 2 };

becomes either

const [foo, setFoo] = useState(1);
const [bar, setBar] = useState(2);

or

const [state, setState] = useState({ foo: 1, bar: 2 });

In the second case it should be taken into account that setState won't merge state properties with previous state, unless this is done explicitly:

Unlike the setState method found in class components, useState does not automatically merge update objects. You can replicate this behavior by combining the function updater form with object spread syntax:

setState(prevState => ({...prevState, ...updatedValues});

As another answer explains, the limitation is that the order of useState calls should be the same every time functional component is called because the order is the only way for the framework to identify component states.

Problems may appear if the state needs to be accessed outside the component for some reasons, e.g. debugging, testing or specific cases. As the documentation explains, a state in functional component is supposed to be tested by its side effects instead of asserting state directly.

Answer 3

You can use React Hooks + functional components for most situations as a substitute for class components, except in need the following situations:

• Certain lifecycle methods - You need to use getSnapshotBeforeUpdate and componentDidCatch lifecycles. As Dan said, there are no Hook equivalents to the uncommon getSnapshotBeforeUpdate and componentDidCatch lifecycles yet.

• Debuggability - You need good component debuggability. States created using useState do not show up like the usual key-value manner in React Devtools at the moment. It's displayed as the format React uses to internally represent the function's state.

• Testing - In Enzyme tests, you could manually set the state of components you were testing. You can't do that with state hooks since the state lives outside the component. You also can't assert component states.