What are React Hooks?

#webdev #javascript #beginners #react

TL;DR :- "Hooks are simple javascript functions which allows to add movement to our lifeless component. Here movement means state. It's like you hook into something and move that thing with hook handler"

Over the years React.js has evolved quit a lot. At a glance looking at all of the APIs in React, it's a lot to grok in:-

JSX
Hooks
Server components & Client components
Suspense
Memoization
cache api
transitions
Context
Higher Order Component/Component Composition
Concurrent Rendering (React Fibre) - UI updates are interruptable
and much more...

Those who has been doing React for years they know about how painful it was before even Functional component was a thing. Just look at below image and see the difference. 😱😱

From creating the Class components to adding and updating the states via this syntax within the component, it was just too much boilerplate to write and maintain for the developers. On top of it the UI rendering was synchronous(means UI updates were blocking).

Enough of the introduction, let's focus on the topic that we are here for.

Before Functional components, we were used to create states within our constructor function in Class component. And for modifying it, we needed to understand about this keyword.

And to solve all of the issues in existing eco-system of React, React Team from Meta(formerly know as Facebook) introduced the Functional component in v16.8 release and which was a banger. It took away all of the boiler-plate code and made our component much simpler to write and maintain.

Functional component release was a shift toward the new Paradigm for writing React. Now we did not have to use class, no this syntax anymore and we could use just simple javascript function and directly return our jsx as value. Pretty neet huh!!!

But wait there's a catch, Functional component can only recieve props and return jsx, no state, no UI update, no interaction in our application. Just static UI!!

Basically Functional components are stateless, they don't have any kind of state creation functionality within them.

So to make our component stateful or to add state within them, we have hooks!!!. Yes you read it right.

Basically Hooks are simple javascript functions which may return some values, which can be used within our Functional component and add make our component stateful.

So now we have understanding about hooks. Now let's learn about some rules which must be adhered when using them:-

Must use/call it within component. Can't be called outside the component.
Must start with use prefix. (for example - useEffect, useState).
Can not be used/called conditionally. We can not call them inside if-else clause.
Can not use/call any hook within React's inbuilt hooks.
Can use/call React inbuilt hooks/Custom hooks within our custom hooks.
Must not be async function. Only normal/arrow function as hook.

Here are the examples

Must use/call it within component. Can't be called outside the component.

// ❌ ❌ ❌ ❌ ❌   // called outside of the component
useEffect(() =>{
   console.log("effect")
},[])

function Component(){
   return (
      <div>jsx</div>
   )
}

Must start with use prefix. (for example - useEffect, useState).

// ❌ ❌ ❌ ❌ ❌ //calling with wrong prefix
function Component(){
   // ❌ wrong prefix - must be "use"
   UseEffect(() =>{
      console.log("effect")
   },[])
   return (
      <div>jsx</div>
   )
}

Can not be used/called conditionally. We can not call them inside if-else clause.

// ❌ ❌ ❌ ❌ ❌  // calling hook conditionally
function Component(){
   let a = 10
   // ❌ conditional call
   if(a == 0){
      useEffect(() =>{
         console.log("effect")
      },[])
   }
   return (
      <div>jsx</div>
   )
}

Can not use/call any hook within React's inbuilt hooks.

// ❌ ❌ ❌ ❌ ❌  // calling hook within inbuilt hook
function Component(){

   useEffect(() =>{
      useTimer()  // ❌ calling custom hook - illegal
      useState() //  ❌ calling inbuilt hook - illegal
   },[])
   return (
      <div>jsx</div>
   )
}

Can use/call React inbuilt hooks/Custom hooks within our custom hooks.

// ✅ ✅ ✅ ✅ ✅  // calling hook within inbuilt hook
function useClick(){
   // ✅ valid
   useEffect(()=>{
      const handler =()=>{}
      document.addEventListener("click",handler)
      return ()=>{
         document.removeEventListener("click",handler)
      }
   },[])

   // ✅ another custom hook of your
   useTimer()
}

Should not be async function. Only normal/arrow function as hook. Although async hook will work, but we should not do it.

// ❌❌❌❌
async function useClick(){
   return {name: "asis"}
}

function Component(){
   const res = useClick()

   return (
      <div>hook</div>
   )
}

That's it. A quick run down what we learned about hooks.