DEV Community

loading...
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)

pic
Editor guide
Collapse
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.

Collapse
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.

Collapse
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.

Collapse
rnnyrk profile image
Ronny

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

Collapse
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.

Collapse
andrewbaisden profile image
Andrew Baisden

useState by far.

Collapse
sakthisivaprakash profile image
Techie Sakthi

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. πŸ˜„

Collapse
kalashin1 profile image
Kinanee Samson

useState, useEffect and useRef

Collapse
anto profile image
antonin87

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