The side-by-side below shows how the component has lost a little weight. To demonstrate, let's check out a class version of our canonical “document title effect” and see the difference between how we used to write something like this side by side with an example using an npm-installed Hook that does the same thing.

It cuts down and makes our code more readable, concise and clear. Just look at what React Hooks have done for others!Īll kidding aside, Hooks do trim the fat. It brings out our jawline and makes us feel lighter on our toes. They already help us to write clearer and more concise code - it's like we went on a code diet and we lost a lot of weight and we look better and feel better. Hooks have a lot of benefit to us as developers, and they are going to change the way we write components for the better. So let's stop talking and start learning about React Hooks. The easiest way to describe Hooks is to show side-by-side examples of a class component that needs to have access to state and lifecycle methods, and another example where we achieve the same thing with a functional component.īelow I provide a working example similar to those in the ReactJS docs, but one that you can touch and play around with, getting your hands dirty with a StackBlitz demo for each stage of our learning. You can read about these APIs in the React Hooks API Reference! So How Do We Use Hooks

Hooks bring to functional components the things we once were only able to do with classes, like being able to work with React local state, effects and context through useState, useEffect and useContext.Īdditional Hooks include: useReducer, useCallback, useMemo, useRef, useImperativeHandle, useLayoutEffect and useDebugValue. Custom React Hooks Chapter 1 What You Should Know About React Hooksįirst released in October of 2018, the React hook APIs provide an alternative to writing class-based components, and offer an alternative approach to state management and lifecycle methods.

5 types of hooks for writing ppt