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
www.jsconfhi.com/

[@user-sg3dw8hq6o]

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!

[@mingmingzhang3588]

This should be pinned to the top!

[@alexanderoweka9716]

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

[@bernardleech5007]

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

[@tatendachawanzwa8439]

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

[@michaelblum4557]

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

[@tannerlinsley]

Thanks!

[@h.vats_]

One of the best videos on react hooks 👌

[@jeromelanteri321]

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.

[@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.

[@lord_kh4n]

Yes, it looks really clean! trust me
I've already implemented this with SWR (Server Store like React Query). I just need to create one hook and all the rest call (get, post, etc) and ifs are in there.
Now some of the components only render react tags and onclick binding, etc! 😄

[@razajamil2534]

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!

[@devmrin]

Thanks Tanner! Very well explained.

[@rohithsrivathsav6110]

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

[@pradipspeaks9395]

Awesome 🙏 specific how things building up step by step ... And at the end nozzle ❤️

[@johannsebastianbach3411]

This talk is amazing!! Thank you Tanner!!

[@robertcarsten3127]

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

[@tannerlinsley]

Thanks!

[@kousheralam]

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

[@roselpadilla]

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

[@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?
th-cam.com/video/J-g9ZJha8FE/w-d-xo.html

[@tannerlinsley]

Yes. It was a typo. :(

[@acecauis8254]

this needs more thumbs up lol. Just saved me 20 min! great talk nonetheless

[@krishnanspace]

I was thinking the same

[@artemu78]

@@tannerlinsley you could save few hours of human life mentioning it in description

[@fireystella]

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

[@tannerlinsley]

Do it!

[@nasheomirro8102]

watching this video makes me really want to redo this side-project I'm making

[@MudasarRauf]

very informative and explaining

[@juraev0056]

This must be the best talk on hooks.

[@Pareshbpatel]

How inspiring is this talk on React custom hooks! - Thanks, Tanner
{2022-11-16}

[@wangguanghui3067]

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

[@dipenparmar2273]

Great talk linskey.... thank you very very much 😅

[@RogerFederer777]

The foundations of react-query :)

[@serhiikhrapin5024]

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?

[@sandeepkumar-nm2qc]

I love js

[@someshmusunuri4233]

Tanner you bought be right at 11:19 and you are amazing

[@Famouzi]

Thats great! Do you guys know any github repo which uses this approach?

[@JohnDoe-mr6mq]

4:49 that got me

[@Mercio2]

Nice!

[@karolbielen2090]

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

[@markizs]

is the code from the presentation available also in the form of blogpost or repo?

[@mgrycz]

@@tannerlinsley Thank you Tanner, awesome work.

[@hugodsa89]

I was getting the feeling that was slowly creating his own Redux as when he made the function makeStore, *heavy breathing*

[@xerxius5446]

Custom Hooks - " It's free real estate "

[@rohangaonkar8912]

You gave me one more reason to stop using redux. Awesome talk

[@rounakjain5774]

Good talk. Can someone help me understand the `handleClickOutside` th-cam.com/video/J-g9ZJha8FE/w-d-xo.html . It seems to be calling the callback on inside click instead of outside.

[@escornwell]

Related to Robert Varga's comment? About a typo.

[@xunli5448]

Your understanding is right. The demo code is not clicking outside, it's clicking inside. Maybe there is a mistake.

[@Joaodjtr]

But where do you keep this custom hooks files? In a helper folder? Or in a folder named "customHooks"?

[@tannerlinsley]

src/hooks/

[@introsis]

Regarding useClickOutside, why do "callbackRef.current(e)" and not just "callbackRef.current()"?