Rebuild React Hooks yourself for Node

Original talk "Getting closure on React Hooks" by Shawn "swyx" Wang at JSConf.Asia 2019 in Singapore. Find it at • Can Swyx recreate Reac...

[@FERnandezJjuan]

That it’s not a HOOKk it’s just an state manager, it’s just taking advantage of closure

[@ViieeS]

Can’t imagine why I need hooks in Node 😅

[@YGaming18]

Wtf

[@okopyl]

Can’t imagine why I need node to except Vercel when we all have Python

[@ViieeS]

@@okopyl depends of use cases, it’s a powerful tool, I use both on my projects

[@sebastiangudino9377]

useState and use effect are a way to achieve (functional) reactive programing (Which is the reactive that gives REACT it's name) It's a very usefull pattern that can simply state management a lot.

[@oleh1]

@@sebastiangudino9377useState and useEffect are hacks because of React's poor design. The proper way to implement reactivity is to use an EventEmitter or an observer pattern(implemented by rxjs for example)

[@arsheonix5893]

feels like he's cloning createSignal in SolidJs

[@RedStone576]

this is just glorified mutable variable

[@sebastiangudino9377]

Yeah, which is what useState is (Except that in react I also triggers a re-render). But pair it with useEffect, and now that variable can ejecute a function everytime it changes. And you have achieved reactivity. Which is pretty great

[@oShinobu]

​@@sebastiangudino9377 This is literally classes with getters and setters except more confusing

[@sebastiangudino9377]

@@oShinobu Yeah! "Reactivity" is just calling a function on getters and setters. It just so happens that such a simple concept gives you "Inmutable state". Which works well with functional programming and allows for very a very debuggable experience for projects with lots of state. Which is why front end frameworks use them

[@pranjalagnihotri6072]

Watched this back in college was amazing 😊

[@marcusrehn6915]

When faced with a difficult problem, find a simpler one and solve that instead. This is not useState.

[@oleksandrploskovytskyy1520]

Better to say it’s custom implementation of signals rather that hooks

[@wlockuz4467]

This is also not a signal. Its just an example of a closure.

[@jma42]

Its not a hook, its a signal implementation react what does there instead is save the state outside from the function, so when the hook runs again (when a component rerenders) it gets the new state. Something like this ```js let state = 0 ; function useState(s) { state = state || s const setState = (setter) => { state = setter(state) } return [state, setState] } const [count, setCount] = useState(1); console.log("initial state", count); setCount((n) => n + 1); console.log("stale state", count); // rerender const [count2, setCount2] = useState(1); console.log("changed state", count2); ```

[@1conscience0dimension]

love you

[@jeetviramgama4392]

Can it be an example of a closure?

[@mrajkishor331]

How?

[@buddimalliyanapathirana1767]

​@@mrajkishor331 the state variable can be accessed after returning .

[@rgrannell1]

Yes I believe so

[@abhinandanchatterjee7315]

Yes. Here, after the useState function has finished execution, the setState function still retains access to its parent variable and is able to do manipulations on it. So it can be called a closure.

[@MCasterAnd]

What kind of madman would want to put Reacts mess into Node?!

[@sebastiangudino9377]

React is pretty cool. And represents a paradigm called reactive programing. Why is using RxJS good and React bad if the goal is reactivity in the end? (Very very very different things, I am aware, but both based arround the reactivity mindset and design patterns)

[@und0]

Mess? React done right is a purely declarative user interface representation of immutable states. OOP patterns are the real messes, garbage paradigm that always lead to spaghetti 🤢.

[@ufukbakan4741]

its not reacts mess, its an approach called reactive programming, and it started with RxJS not even with React

[@stopPlannedObsolescence]

sounds like a junior talking

[@ryanlog]

@@und0 React literally is a big MESS when compaed to other frameworks like Solid, Svelte, Vue etc and slower from all of them

[@ShaharHarshuv]

Doesn't that defeats the purpuse if you don't "rerender"? what's the point?

[@maelstrom-qw1jl]

Exactly. There's no concept of "re-rendering" whatsoever in a server-side context so React hooks are completely useless.

[@sebastiangudino9377]

Your render function can do other things. Like updating the database every time the variable changes This also opens the possibility for a useEffect hook. That triggers a function every time a variable gets updated. This would be a nice alternative to the observer pattern and things like RxJS Hooks are a weird idea in node. And there are other ways to archive things like reactivity there (Like the aforementioned RxJS). But it is really not a bad idea! It's worth exploring

[@ShaharHarshuv]

​@@sebastiangudino9377Based on the example in this video, it's unclear how you would do such a thing. Assuming that you don't really want to touch the "useState" imlementation? One interesting thing that actually could be useful to replace rxjs in simple scenarios is signals. I've been looking at Angular's implementation lately at that looks pretty good. They manage to create connections between signals and effects because when you run a "compute" or "effect" call back they register a reference to that "node" so every signal you tried to read from is registered as a dependency of that node, so the subscription happens automatically. It's basically an easier version of rxjs that is easier to read and works for simple scenarios

[@ganeshtowar8050]

Where can we see full videos of this

[@siyahulhaq7062]

Use state in react using usereducer under the hood and reducer is managing re renders

[@ryanlog]

This is SolidJS actually

[@martybando1668]

so convoluted

[@MrPlaiedes]

So it's solid js...

[@comadeycluster]

Font ??

[@shantanusharma4901]

Very good

[@hasanassidiqin9497]

Return

[@top-notchdiscovery1920]

I'd call it useSignal

[@afrid18]

What font is it?

[@target500milliontradersinv5]

Ful lecture Vedio link?

[@GamingGeek9000]

Epic

[@MarianoAquino]

looks like FP discovered OOP =P

[@ProtectedClassTest]

react devs are so crazy

[@spookyconnolly6072]

​@@ProtectedClassTest this sort of carry-on has been in literature for lisp/scheme/FP languages like SICP for decades. There is an old joke at MIT -- that i will not repeat in full -- where an initiate talks to a yogi and tries to get an answer whether closures or objects are better.

[@princesiachin279]

❤

[@thomasneal7126]

I concur

[@thanirmalai]

But how to trigger a render on to the screen when state is changed

[@EatMyHacks]

useEffect!

[@redhook777]

Call the virtual comparison function for virtual DOM inside setState function

[@novanoskillz4151]

@@EatMyHacks so now he needs a video on how to recreate useEffect for node.

[@basepasandhai1906]

React automatically re render components on state changes

[@georgehammond867]

That's is really hard software

[@Cookie-mv2hg]

What on earth is the font he is using ?

[@awekeningbro1207]

Fira code

that’s not how hooks work! with hook these 4 LoCs will print out 1 and 1

[@kavehtehrani]

That was amazing!

[@hareeshbhittam7243]

What is the name of the speaker?

[@raijinhasarrived]

You can try to check in description

[@buddimalliyanapathirana1767]

​@@raijinhasarrived can't see description on the phone

[@raijinhasarrived]

@@buddimalliyanapathirana1767 I heard a legend about 3 dots on top right corner

[@Nonsense116]

Lol why would you ever want to bring in reacts insanity into a non UI world

[@helloluiis]

I’m in frontend, this is one of those times where frontend concepts just need to stay in the frontend 😅

[@rahulpatil1382]

what is good to use useState in node js that venila js i am new to this and want to know more

[@hodev632]

Making imutable setter and getter

[@Khaled-bs7zc]

Guys don't take this video seriously. It's meant to be serious but it's a waste of time.

[@greendsnow]

Can you please clone svelte too? Because react state management is awful

[@ponysmallhorse]

I am a simple man. I see JS content I downvote! Python sends its regards.

[@nathanhettige8465]

Bruh

[@undefined_cat]

It makes no sense

[@Thassalocracy]

If you have to call "count" as a function then effectively you're creating a signal which means you're cloning SolidJS and not React. 😏

[@complexity5545]

This is why javascript sucks. So many gotcha's. I feel sorry for new programmers. You guys are taught the bad stuff from the beginning.

[@zheil9152]

How to slow down you performance of node code 101

[@hasanassidiqin9497]

Usestate

[@TheScriptPunk]

Lets normalize not using ameteur frameworks my guy. Node is awful as are the libs that exist within it