What Will You Learn?

• React hooks
• On February 16, 2019, React 16.8 was released to the public.[11] The release introduced React Hooks.[12] Hooks are functions that let developers "hook into" React state and lifecycle features from function components.[13] Hooks do not work inside classes — they let you use React without classes.[14]
• React provides a few built-in hooks like useState,[15] useContext, useReducer , useMemo and useEffect.[16] Others are documented in the Hooks API Reference.[17] useState and useEffect, which are the most commonly used, are for controlling state and side effects respectively.
• Rules of hooks
• There are rules of hooks[18] which describe the characteristic code pattern that hooks rely on. It is the modern way to handle state with React.
• Hooks should only be called at the top level (not inside loops or if statements).
• Hooks should only be called from React function components and custom hooks, not normal functions or class components.
• Although these rules can't be enforced at runtime, code analysis tools such as linters can be configured to detect many mistakes during development. The rules apply to both usage of hooks and the implementation of custom hooks,[19] which may call other hooks.
• Class-based components
• Class-based components are declared using ES6 classes.