React

React Hooks Hello World

hook

If you are on React version 16.8 or beyond, here is an awesome news for you. Now you don’t need to convert from functions to classes to make your react components use states. You can simply use power of hooks and make your function components use states.

Let me take a very simple example where I build a hotel Filton where you can perform only two things, Check in and Check out. And I’ll show number of guests currently checked-in in the hotel.


function Hotel() {
  const [count, setCount] = useState(0);
  let msg;
  if (count>0) {
    msg = `Hotel Filton - No. of guests checked in - ${count}`;
  }
  else {
    msg = 'Nobody likes your Filton hotel. Give some offers';
  }

  return (
    <div>
       <p>{msg}</p>
       <button onClick = {() => setCount(count+1)}>
        Check-in
       </button>
      <br/>
      <br/>
       <button onClick = {() =>  {
         if (count>0) {
           setCount(count-1);
         }
        }
       }>
        Check-out
       </button>

    </div>
  );
}

Here is a live example. https://codepen.io/anilpank/pen/YzzpqEq

Let me explain what’s going on here. We are using a hook called useState here. We call it inside a function component to add state to that component. (Before React 16.8, you could add state only to class component, not a funciton component).

const [count, setCount] = useState(0);

Here you see that useState hook returns two things. count which is the state variable and setCount which is a function which will set the count state variable. There is one argument that can be passed to useState variable. Here we are passing 0. That is being set as initial value of count variable. I can directly access count variable anywhere to see number of guests checked in and call setCount function anywhere in function component to change the count variable.

That’s it. This looks very simple. (although even class based State management in React is not that complicated). Have a look at it if you want to compare and contrast.

The recommendation from React team is not to start rewriting all existing classes to function components to use hooks. (They themselves are not doing it). But if you are adding a new functionality, or fixing a bug, then start using these hooks. Let me know your opinion in comments, do you feel that Class based state management was cleaner or do you like the new react vision of making state available in function components using Hooks.

In my next article, I’ll cover state hooks in detail. Stay tuned by subscribing to my blog.

How useful was this post?

Click on a star to rate it!

Average rating / 5. Vote count:

As you found this post useful...

Follow us on social media!

We are sorry that this post was not useful for you!

Let us improve this post!

About anil

Hi, I'm Anil Verma. I have a passion for teaching and developing awesome front end apps. I was involved in development of post processor for Nastran(built by NASA). More recently I have been building supply chain apps at E2open.
View all posts by anil →

Leave a Reply

Your email address will not be published. Required fields are marked *