react-context

Starting with React 16.8.0, Hooks are included in React DOM, React Native, React DOM Server, React Test Renderer, and React Shallow Renderer. All React packages need to be 16.8.0 or higher for Hooks to work.

No, you don't need to rewrite all your class components. There are no plans to remove classes from React, and you can continue using them. It's recommended to try Hooks in new code while keeping existing class components as they are.

Components using Hooks can be tested like regular components. Use ReactTestUtils.act() to wrap rendering and updating code, ensuring effects are flushed. For custom Hooks, create a component in your test that uses the Hook and test that component. React Testing Library is also recommended for reducing boilerplate.

You can continue using the same APIs as before. React Redux since v7.1.0 supports Hooks API with hooks like useDispatch or useSelector. React Router supports hooks since v5.1. Other libraries may also add Hooks support in the future.

Constructor: Initialize state in useState. getDerivedStateFromProps: Schedule an update while rendering. shouldComponentUpdate: Use React.memo. render: The function component body. componentDidMount, componentDidUpdate, componentWillUnmount: Use the useEffect Hook. getSnapshotBeforeUpdate, componentDidCatch, and getDerivedStateFromError: No Hook equivalents yet, but they will be added soon.

You can use a single state variable or split state into multiple variables. While you can merge state updates manually, it's recommended to split state into separate variables based on which values tend to change together. This avoids the need for manual merging.

Yes, Hooks were designed with static typing in mind. They are easier to type correctly than patterns like higher-order components. The latest Flow and TypeScript React definitions include support for React Hooks. Custom Hooks also allow you to constrain the React API for stricter typing.

The ESLint plugin enforces that Hooks are called in the same order on every render and that Hooks are either inside a PascalCase function (assumed to be a component) or another useSomething function (assumed to be a custom Hook). The rules help avoid bugs but may have some false positives.