React Hooks Uncovered: A Beginner's Guide to Harnessing the Power of React's Essential Building Blocks

Hola 👋🏽, Welcome to this amazing series where we will be going through hooks in React. Hooks in React are one of the best things that have happened to the React ecosystem since sliced bread. Since the proposal of the React Hooks feature in October 2008 and its release ~4 months later in February 2019, hooks have gained tremendous acceptance within the community and it's safe to say that it's one of the bragging rights of React.

This is going to be a blog series on the various hooks that React provides for us out of the box, we'll gloss over the hooks provided out of the box by React then we will discuss each in detail in upcoming parts.

During the series, we will also learn how to create custom hooks and also build a mini-project with them.

Requirements needed for this series

To follow along with this series, you'll need a solid grasp of JavaScript, a basic understanding of React, and an active learning mindset.

What are Hooks in React?

Hooks in React are functions that allow you to use state and other React features in functional components. They were introduced in React version 16.8 to address the problem of reusing stateful logic in components. They can either be built-in or combined to create more powerful hooks.

They can be classified based on the following categories

1. State Hooks: State hooks help a component "remember" information like user input. A good example is a form using the state to store input value.

   Examples of state hooks are

   • useState: used to declare a state variable that can be directly updated. It usually returns an array consisting of the state being updated and a function for updating the state

   • useReducer: it declares a state variable with the logic for updating the state inside a reducer function.

     Context allows a component to receive information without having to pass props down to the children. They help us avoid prop drilling and make our code more performant

2. Context Hooks: allows a component to receive information without having to pass props down to the children. They help us avoid prop drilling and make our code more performant

   • useContext: This hook helps to read and subscribe to context

3. Ref Hooks: Refs make it possible for a component to hold some information that isn't used for rendering e.g. DOM node or timeoutId. updating a ref does not cause a rerender in your components, unlike the state. They usually come in handy when working with non-React systems like built-in browser APIs

   Example of Ref Hooks

   • useRef: help to declare a ref. The ref can be used to hold any value in it but most time used for DOM node

   • useImperativeHandle: This is one of my favourite hooks, it lets you customize the ref exposed by your component, but it is rarely used.

4. Effect Hooks: Effects let a component connect and synchronize with external systems. This includes making API calls, dealing with browser DOM, animation etc.

   Example of Effect hooks

   • useEffect: helps to connect to an external system

     There are two rarely used variations of useEffect with differences in timing:

   • useLayoutEffect fires before the browser repaint the screen. You can measure the layout here.

   • useInsertionEffect fires before React makes changes to the DOM. Libraries can insert dynamic CSS here.

5. Performance Hooks: Like the name suggests performance hooks help to improve performance in our components skipping calculations and unnecessary re-rendering.

   To skip calculations and unnecessary rerendering we can use

   • useMemo: helps us cache the result of an expensive calculation

   • useCallback: helps us cache a function definition before passing it down to an optimized component

There are cases where it is not possible to skip re-rendering because there is a need for the screen to update. Performance can be improved in such instances by separating synchronous blocking code (like typing into an input) from non-blocking updates which don’t need to block the user interface (like updating a chart).

To prioritize rendering, use one of these Hooks:

• useTransition lets you mark a state transition as non-blocking and allow other updates to interrupt it.

• useDeferredValue lets you defer updating a non-critical part of the UI and let other parts update first.

1. Other Hooks They are usually used by library authors and aren't commonly used in application code

   • useDebugValue: This is used customize the label of React DevTools displays for your custom Hook.

   • useId: This hooks allow a component to associate a unique ID with itself. Typically used with accessibility APIs.

   • useSyncExternalStore: Let's a component subscribe to an external store

   • Custom Hooks: Your hooks are defined as a JavaScript function.

Thank you for staying with me until the end! I appreciate your dedication.

Get ready for the exciting next part of this series, where we will explore the fascinating world of State Hooks. Brace yourself for an immersive and enlightening journey into state management in React. Stay tuned for more captivating content!