This blog post is the first in series about React Hooks.
For those who just start to learn React or those who are switching from using class-based components to functional components - this topic is a must-to-learn.
React Hooks were first introduced in React v.16.8 and became very popular since then. From what I have read from React developers, they even plan to leave classes for good and use functional components only. At least they intend to develop hooks further and advise devs to use them often.
What is Hook?
Hook is a fancy name for a simple JavaScript function which is called from React library.
Before hooks, the most useful building block was class-based component, because it was using local state management and lifecycle methods for side-effects.
With hooks, we can use React lifecycle features and other built-in features directly from functional component without the need to create class.
How to use Hook?
To use hooks, you need first to import the necessary Hook from React library. To distinguish Hooks from other JS functions, it's a convention to start their name from word use
(it is possible also to create your own Hooks, but this is for later topic).
We import for example useState
hook from React like this:
import {useState} from 'react';
Than we can use it in our code:
const [state, setState] = useState();
Before the release of React Hooks, this example would have used more lines of code, as we’d have had to make use of a class component.
Rules for using Hooks
- Call Hooks at the Top Level
- Only call Hooks from React Components
- Use the key word
use
for creating customs Hooks
Call Hooks at the Top Level
Always use Hooks at the top level of your React component.
Don't call Hooks inside loops, conditions or nested functions.
By following this rule, you ensure that Hooks are called in the same order each time a component renders.
Only call Hooks from React Components
Only call Hooks from React components and never from regular JavaScript functions as it will simply not work there.
If you happened to import your preferred Hook without importing React, you will not be able to make use of the Hook you’ve imported.
Use the key word use
for creating customs Hooks
You can create your own custom Hook simply by starting your function name from keyword use
- for example useUserName
.
Inside the custom Hook it's possible to use other hooks:
import {useState} from 'react';
const useUserName => (userName) => {
const [isLoggedIn, setIsLoggedIn] = useState(false);
useEffect(() => {
const data = MockedApi.fetchData();
data.then((res) => {
res.forEach((e) => {
if (e.name === userName) {
setIsLoggedIn(true);
}
});
});
});
return isLoggedIn;
}
Built-In React Hooks
There are many built-in hooks in React library, which we explore in my other posts. Here is a list of them:
Basic Hooks:
- useState
- useEffect
- useContext
Additional Hooks:
- useReducer
- useCallback
- useMemo
- useRef
- useImperativeHandle
- useLayoutEffect
- useDebugValue
Why to use Hooks?
Hooks let us organise the logic inside a component into reusable isolated units, hence they help to solve such problems as:
- Huge components that are hard to refactor and test.
- Duplicated logic between different components and lifecycle methods.
- Complex patterns like render props and higher-order components.
Each Hook may contain some local state and side effects. You can pass data between multiple Hooks just like you normally do between functions. They can take arguments and return values. They give us so much more flexibility!
They are much easier to read and test because they are plain JavaScript functions and you end up with less code.
If you want to learn more about Hooks, AlterClass learning platform has a very good course called Become a React Developer and now they offer 40% off discount on it!
I hope you enjoyed this brief intro and in my next blog post we are going to look at specific Hooks more closely.
Top comments (5)
I can't imagine doing classes anymore since 16.8 😉
Never liked them anyway 😉
I totally agree! Since C# I always felt dislike to This keyword :)
When Hooks first launched it just felt quite alien to me after using classes for so long. Now I just default to Hooks once you understand how it works the code is cleaner.
Totally agree!
Hooks are amazing in react