React Hooks has been a feature since version 16.8. A feature that has greatly influenced the way I develop in React. Moving from class components to functional components.
However, what are hooks? How to we create our own hooks? We will address all of these questions. All in Typescript. Let's get started.
What Are Hooks?
According to reactjs.org, Hooks, "are functions that let you "hook into" React state, and lifecycle features from function components." So instead of having to do react components with classes, you can do it from functions!
If you had to write function components, and needed state, it needs to be converted into classes. Now you can do it all in your function components!
How do we create our own hooks?
There may be times when we have some logic that would be perfect for multiple components.
We don't want to copy and paste the same logic within all the components. So what we can do instead, is to extract the logic. And move it to its own function! After we do that, any component that may need the logic, can import it in, and use it. Making things nice and tidy in your code!
Every custom hook will have a name that starts with 'use', so React can determine that it's a hook. We can also specify what arguments, and what it should return. If any. So, it's pretty much a normal function!
Example:
Here's an example. This is a web application, that renders a simple page.
Every time we change the height or width of the window, the new resolution will be displayed onto the page. And it will display the number of re-renders it did!
This was all possible with React Hooks! Let's look at the main page component.
It sets a local hook within the page, called renders and, gets the width, and height of the screen dimensions from the useDimenions hook.
useEffect is a function that works hand in hand with hooks. This code is saying, if height or width changes, then update the number of renders.
useResolution Hook:
This part was a learning process for me. I had a bit of trouble with the event listeners. However, user QoP from stackoverflow provided a great solution for this problem.
Using Hooks (React 16.8.0+)
Create a useWindowDimensions hook.
import { useState, useEffect } from 'react'
function getWindowDimensions() {
const { innerWidth: width, innerHeight: height } = window;
return {
width,
height
};
}
export default function useWindowDimensions() {
const [windowDimensions, setWindowDimensions] = useState(getWindowDimensions());
useEffect(() => {
function handleResize() {Huge shoutout to this person for sharing a working example of how to get the resolution with React hooks.
Essentially though, when the hook is used for the first time, it sets an event listener to the window. It will call handleResize when the dimensions change. We then get the width and height of the window, and set the values in the windowDimensions hook. Finally, we return windowsDimensions. We can then use this hook anywhere where this is needed!
Conclusion:
I hope this article helped you learn a bit more about React hooks, and custom React hooks. If you have any questions or anything you may need followup with. Please let me know!
Repository:
Feel free to view, fork, or clone the repository.
If you have any issues, or any questions, feel free to let me know!
Top comments (0)