Everything you need to know about React Hooks

Image from rawpixel on Unsplash

(Also published on my personal blog)

React just announced a new feature: Hooks. It’s a brand new set of APIs that enables powerful new ways to share stateful logic between components, optimize performance without significant rewrites, get some of the benefits of Redux-style separation of concerns, and more. They also deliver on a promise that the React team made years ago — stateful function components. Using state from function components came up as a possibility in Dan Abramov’s Q&A on Reactiflux all the way back in April 2016.

It’s been a long time coming, but they’re here! More than just state, though, there are 11 new functions in all that should enable the full range of functionality that we use classes and the lifecycle for today.

• useState
• useEffect
• useContext
• useCallback
• useMemo
• React.memo (Not a hook, but new)
• useReducer
• useRef
• useLayoutEffect
• useImperativeMethods
• useMutationEffect