React.js Let’s Hook

If you are a starter to react, I suggest that you read this blog first on how to get started with react.js.

When did Hooks come along?

“Hooks are a new addition in React 16.8″ React.js official site. This means that to use Hooks, you need to have React.js version 16.8 or later.

But Hooks has brought some frustration among some react developers, They argue It’s inappropriate to bring Hooks in to play in a matured and well-understood library like react, But Most developers agree that Hooks can transform the react library itself and some of its limitations that the developer been facing so far. we will list some of the pros of using Hooks below and why we use Hooks here in Addis Software and why you should. We hope that other software developers in Addis Abeba shares our view

Hooks come in to play Because there were problems. Well, Hooks don’t solve all problems, but they still solve some of the problems we have faced with react development and making a complex application using merely components.

By the way, one thing to note here is that the react team is not planning on replacing class components by Hook out of a sudden, they have a strategy they call it “Gradual Adoption Strategy”. As you might have guessed classes are going to stay for a while.

Here are some of the problems with react class components and why they are being replaced by Hooks.

Play by the rules

If you are convinced by Hooks into play, let’s proceed to write hooks. But before that, we have to set some rules before we start the fun part. Here are the rules to write hooks

now without any further ado, let’s Hook

in the code below, we will just print out some basic example to help us understand the basic components of a Hook, that is a react Hook

import React from 'react';

function OurFirstHook () {
   return (
        <div>
         <h1> our first Hook </h1>
        </div>
         )
}
export default OurFirstHook

But in the snippet above we didn’t use any Hook APIs so we are going to do that in the next example below

import React from 'react';
function OurFirstHook () {
const [clicked , setClicked] = React.useState(0);
const clickedHundler = (event) => {
     setClicked(clicked+1);
}
   return (
        <div>
         <Button onClick={clickedHundler}> 
{`button clicked ${clicked} times`}
 </Button>
        </div>
         )
}
export default OurFirstHook

We think that Hooks will be used more often by software developers in Addis Abeba and all over Africa.
we will discuss the code above line by line in the next Blog, til then ,

and also you can subscribe to our newsletter to get notified when new blogs come in

[email-subscribers-form id=”1″]