React Hooks let you use state and othe React features without writing a class. They were introduced to React in version 16.8 and they have had a big impact on the way people create components. This post will discuss what they are, why they are useful and provide a summary of some of the common types of hooks.

What are React Hooks?

Hooks are functions that let you "hook into" state and lifecycle features from function components.

Why are React Hooks useful?

Hooks are useful because hooks allow you to use React without classes. They allow you to use state within function components. They also allow you to re-use stateful logic between components.

What are some common built in hooks?

• useState - Returns a stateful value, and a function to update it
• useEffect - Adds the ability to perform side effects from a function component
• useContext - Subscribes to React context without introducing nesting
• useReducer - Manages local state of complex components with a reducer
• useMemo - Returns a memoized value
• useCallback - Returns a memoized callback
• useLayoutEffect - Identical to useEffect, but it fires synchronously after all DOM mutations
• useRef - Creates a reference to the DOM element in the functional component
• useId - Generates unique IDs that are stable across the server and client
• useTransition - Allows us to skip undesirable loading states

Can I create my own custom hooks?

Yes, you can create custom hooks. You will want to do this if you need to re-use stateful logic between components.

Citations