Hooks in practice
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 .
1.useState
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:
2.useEffect
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:
3.useRef
With types this will becomes very handy to expect the output of you html element
4.useContext
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:
5.useReducer
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 🙂
