What Is React Hooks?
React hooks are one of the most useful features of React. They are reusable functions that provide us to access React features like state and lifecycles. It saves us from code complexity. Hooks are called inside of React function components. We call hooks on-demand.
Built-in hooks were listed below:
Basic Hooks:
- useState
- useEffect
- useContext
Additional Hooks:
- useReducer
- useCallback
- useMemo
- useRef
- useImperativeHandle
- useLayoutEffect
- useDebugValue
- useId
How to Use React Hooks?
Firstly, hooks must be imported from react.
There are few things to keep in mind while using React Hooks:
- Hooks only are called inside of React function components. They cannot be called inside of vanilla javascript functions.
- Hooks can be called on top-level of React function components.
- Hooks can’t be called in condition expressions, nested and subfunctions.
What is useState? How to Use It?
useState is a state hook. It is a hook that stores, updates values from react component functions.
It is imported by adding “import { useState } from “react”;” to the react function component file.
syntax: const [state, setState] = useState();
It is assigned initial value by passing any value to the useState function. It is accessed by using the “state” variable. State is updated using setState(updatedValue) function.
What is useEffect? How to Use It?
When an asset component is mounted via useEffect hook, it dictates which function will be executed. It takes anonymous function and dependency parameters.
useEffect is imported by writing import { useEffect } from “react”;
For example:
What is Custom Hooks?
React provides us to write custom hooks on-demand. When naming a custom hook, it must start with “use” prefix. For example, useLocalStorage, useInput. React helps us to write customized components with the same logic but different requirements.Custom hooks can be instructed to take parameters and return values.
Custom hooks can be used to create reusable functions to ensure code stays clean.
useCurrentLocation Example
Let’s write a custom hook that we detected location informations when we open the web site.
The first thing must be done is to store location in location state. The value will be kept empty for the start.
Geolocation API will be used to detect location. In the first render, if geolocation is not supported, it will return false.
If geolocation is supported, getCurrentPosition method will be called. If the method is successful, position as a parameter will be passed to the success handler function for geolocation’s getCurrentPosition method that’s been created.
Then, state as coordinate object will be set.
And lastly, return location state will be returned.
Then at App.js React function hook will be called and the output will be logged. This is how it could be done:
In conclusion,
React hooks are javascript functions that enables to make use of features such as state and lifecycles. It makes writing code with fewer lines a possibility.
Specialized hooks that are not built-in React hooks can be created thanks to custom hooks. Built-in React Hooks can be called in custom hooks. That makes it easier to read the code. But also it is a good practice to name custom hooks with “use” prefix.
