DEV Community

Cover image for Which React hooks do you use the most?

Which React hooks do you use the most?

madza profile image Madza ・1 min read

Hooks were first introduced in React v.16.8, so that we could use state and other React features without writing a class.

Some of the built-in ones include useState, useEffect, useRef, useCallback, useMemo, useContext and useReducer.

Which ones do you use the most? And how often do you write your own custom hooks?

Discussion (9)

link2twenty profile image
Andrew Bone

I use useState and useEffect in most components, though I do try to avoid using hooks if I can help it, just for the performance gains.

I've written a few custom hooks I tend to only write them if they're gonna be used in more than one place in the app I'm working on or if I can see using the hook in several apps in the future. If it's one off functionality I can just embed the logic into the component that needs it.

zzoukk profile image
zZouKk • Edited

useState, useEffect and useContext for Firebase integration.
Sometimes useMemo for expensive computations (deriving a state for instance).

Otherwise, never happen to use more than that as for now.

lexlohr profile image
Alex Lohr

useRef(initialValue) is just useState({ current: initialValue })[0], so you get that one for free. useCallback(callback, dependencies) is merely a shorthand for useMemo(() => callback, dependencies). Also, you forgot useLayoutEffect in your list.

I mostly use useState, useRef and useEffect. If need be, I'll use useContext, but I try to avoid useCallback (you can directly use a Dispatch from useState as a callback in most occassions and handle the result in an effect). I also mostly refrain from using useReducer, as it is meant to provide an elegant abstraction of complex logic - and one should always simplify logic as much as possible before abstracting it into code.

rnnyrk profile image

I'm hooked! Using all the build-in hooks quite often. useState and useEffect the most of course. Also writing a lot of custom hooks. Once I find myself re-using a lot is for example useQueryParams (with the qs package), useMediaQuery, useModal

mondal10 profile image
Amit Mondal

Since i have to pick only one it is definitely useState 😄
Building custom hooks depends on the size of project and reusability.

andrewbaisden profile image
Andrew Baisden

useState by far.

techiesakthi profile image

Mostly I use useState and useEffect with or Without dependency array. Also will use useRef,useCallback and useMemo at required scenarios.

Never write any Custom Hooks, instead the first option come to mind is writing custom utility functions as we working on Big project. 😄

kalashin1 profile image
Kinanee Samson

useState, useEffect and useRef

anto profile image

useState, useEffect and useContext are used in most components.
Sometimes i use useReducer to handle complex state logic and build better unit tests

Forem Open with the Forem app