Photo by Bundo Kim on Unsplash

The last month React team has been released new update in react bringing the new feature of hooks, if you’re looking for definition of hooks head to react website and check An intro to hooks out

If you’re like me doesn’t like to talk too much and taking directly to the best practises of using any of the new features in technology, let’s talk than.

I will explain in both javascript and typescript, maybe for javascript sometimes you just need to remove types from typescript file, and sure change file extension name to .js .

useState is alternative for this.state in class component, it returns value and it’s action, let say that we have counter component will return counter number:

Now with useState will be like this:

With types:

This function is an alternative for life cycle function in class component, specifically component DidMount and componentDidUpdate

With types you probably could add types from the declaration of your state: const [count, setCount] = useState<number>(0) .Than if you want to assign another types to it will return false

setCount('count') // return error

There is a term where you could build your own custom hooks, which is actually ability to useState, and useEffect outside of your function.

This term called Custom Hooks, you’ll heard a lot about it in the upcoming days

For example:

With types this will becomes very handy to expect the output of you html element

This function used for Context API, if you don’t know what Context API is, it’s alternative for Redux came from react team to solve state problem and passing props to children and grandchildren.

First of all, we will take a look how to use Context api in normal class Component:

With types I will use another example:

With that you could go far by using useContext and useReducer together.

This article has been shared also on Coderrview.io. check it out for more articles.

Hopefully That clear and helpful.

Claps and Share will be appreciated 🙂

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store