[{"slug":"understanding-react-hooks-by-building-them","frontmatter":{"content":"\nRecently I started learning `React` after seeing all the hype around it. Frankly, I am yet to understand why developers are going *JavaScript first* way to build UI when in fact the more natural thing is *HTML first* to build UI and use Javascript to add interactivity. \n\nBut I really like how they have taken the concept of *JavaScript* closures to create `[Hooks](https://reactjs.org/docs/hooks-intro.html)`\n\nEven after spending almost a decade writing JavaScript, I had hiccups while understanding how exactly the hooks concept work. How can a function have multiple `React.useState` calls and is able to figure out which useState call would return what? \n\nTo internalize how hooks work, I tried to re-create `React.useState` API.\n\nYou can access the implementation [here](https://stackblitz.com/edit/js-yrplht?file=index.html)","data":{"category":"JavaScript, React, React-Hooks, build-react-internals","creationTs":1629545760000,"date":"August 21, 2021 1:36 PM","lastModified":"September 14, 2021 9:53 AM","lastModifiedTs":1631605980000,"published":"Yes","title":"Understanding React Hooks by building them"},"isEmpty":false,"excerpt":"","category":["JavaScript","React","React-Hooks","build-react-internals"],"creationTs":1629545760000,"date":"August 21, 2021","lastModified":"September 14, 2021 9:53 AM","lastModifiedTs":1631605980000,"published":"Yes","title":"Understanding React Hooks by building them","updated":"September 14, 2021"},"content":"

Recently I started learning React after seeing all the hype around it. Frankly, I am yet to understand why developers are going JavaScript first way to build UI when in fact the more natural thing is HTML first to build UI and use Javascript to add interactivity.

But I really like how they have taken the concept of JavaScript closures to create [Hooks](https://reactjs.org/docs/hooks-intro.html)

Even after spending almost a decade writing JavaScript, I had hiccups while understanding how exactly the hooks concept work. How can a function have multiple React.useState calls and is able to figure out which useState call would return what?

To internalize how hooks work, I tried to re-create React.useState API.

You can access the implementation here

\n"}]

Category: JavaScript