Custom Hooks in React: The Ultimate UI Abstraction Layer - Tanner Linsley | JSConf Hawaii 2020

Custom Hooks in React are useful for much more than just managing the local state and one-dimensional side-effects you see in almost every React Hooks example.

They can be used to build sophisticated memoization pipelines and chained-effects that automatically manage local and network resources.

But most importantly, they provide a new new layer of abstraction to accomplish new and amazing patterns that we couldn't have just over a year ago.

On the surface, this abstraction layer is simply collection of custom hooks, but when unlocked, it can be the most powerful piece of your application architecture.

JSConf Hawaii will return soon

[БекназарКемелов]

Time code
React hook basic - 1:40
useDarkMode (useState, useEffect) - 5:20
useClickOutside (useEffect, useRef, useCallback) - 8:00
Global state (useContext, useReducer, useMemo) - 12:03
Single store - 16:14
Persistent store - 17:24
Server state - 18:30

Thank you very much Tanner Linsley!

[alexanderoweka]

This is an awesome video.

I think Tanner Linsley's approach of using hooks to manage Separation of Concerns (SOC) is 🔥🔥🔥.

[nightvwon]

I loved every part of this video. Thanks Tanner Linsley

[bernardleech]

Thank you for this awesome talk, Tanner. So many great ideas packed into less than 30 minutes.

[michaelblum]

Thanks Tanner, this was a really, really great little talk. This paradigm is a catch all - a boon for performance, cleanliness of code and readability, as well as developer experience and ease of implementation, recycling of code/cannibalization...

[razajamil]

Great talk. I have a big smile on my face because I moved our team to almost exactly this way of developing and it's been a huge improvement. Lot's of reusable business logic means we get to spend more time creating really awesome UIs and worry less about bugs. That bit about all your data being a hook is exactly how I imagined hooks would be used once the dust settled, if you think about it it's kind of obvious.


Before hooks, you had to go through the render method to share functionality, looking back that seems insane. Why on earth do I have to pollute my render method to use some business logic? React was incomplete pre-hooks in this line of thinking.


Can't imagine life without hooks now!

[tatendachawanzwa]

Nice! After reading Kent Dodds blogs this is the perfect video to follow on!

[DimaBiletskyy]

Great presentation. I like the way you structure app logic with hooks. I'm going to try this approach in my project. It looks very clean.

[serhiikhrapin]

11:05 Indeed, callbackRef will never change. So, why do we have to pass it to the dependency array? Just because callbackRef is used inside useEffect, therefore it should be present in an array, right?

[rvarga]

Great talk! Thank you.
I'm a bit confused by this part. How come if the Menu Ref contains the Clicked Target we callback to say "Clicked outside!". Shouldn't that "contain" check be negated?

[roselpadilla]

Really great talk, seems like we've come full circle on MVC lol

[robertcarsten]

This has been incredibly insightful for how my team and I go about structuring logic inside our react apps. There is always that base nausea over import flood in a react component but I think if you can manage to push through that this design pattern has a tonne of advantages in most use cases.


Also cannot praise React Query enough, dead simple library that alleviates a lot of boilerplate for our codebase

[Pareshbpatel]

How inspiring is this talk on React custom hooks! - Thanks, Tanner

{2022-11-16}

[rohithsrivathsav]

Wow, you just showed how we can replace redux, redux thunk, redux saga and redux persist with context api and hooks. Really awesome!

[karolbielen]

11:00 I've been wondering about how to deal with unnecessary dependencies in dependency arrays without suppressing eslint warning for so long...

[h.vats_]

One of the best videos on react hooks 👌

[jeromelanteri]

fantastic tutorial, you really know to express yourself and what you said was pretty clear and efficient. You are really one of the best around. Thank you very much.

[kousheralam]

Insightful - today i learned that how should i plan my next react migratin

[fireystella]

so cool! gonna try this logic next time i code!

[wangguanghui]

Great talk! What tool did you use to highlight syntax?