Hello everyone, this article will be my own challenge in understanding React Hooks. Try it for 5 minutes and you’ll find out about React Hooks.
The first will be useState , one of the popular hooks in React Hooks.
1. useState
Let’s start with a functional component
1 2 3 4 5 6 7 8 9 10 11 |
import React from 'react'; function App() { return ( <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> div</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> h1</span> <span class="token punctuation">></span></span> 0 <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> h1</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> button</span> <span class="token punctuation">></span></span> Change! <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> button</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> div</span> <span class="token punctuation">></span></span> ); } |
As you can see, there is nothing new here. I just displayed 1 text and 1 button.
Now let’s import useState , to learn how to manage state in functional component.
Since these hooks are a function, try console.log
see how it looks.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
import React, { useState } from 'react'; function App() { const value = useState(); console.log(value); return ( <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> div</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> h1</span> <span class="token punctuation">></span></span> 0 <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> h1</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> button</span> <span class="token punctuation">></span></span> Change! <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> button</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> div</span> <span class="token punctuation">></span></span> ); } |
Yes, this is the result I got, an array
1 2 |
<span class="token operator">></span> <span class="token punctuation">[</span> <span class="token keyword">null</span> <span class="token punctuation">,</span> <span class="token function">ƒ</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">]</span> |
Try passing an argument to useState
1 2 |
<span class="token keyword">const</span> value <span class="token operator">=</span> <span class="token function">useState</span> <span class="token punctuation">(</span> <span class="token boolean">true</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> |
The result is an array
with the first element as the argument we passed above
1 2 |
<span class="token operator">></span> <span class="token punctuation">[</span> <span class="token boolean">true</span> <span class="token punctuation">,</span> <span class="token function">ƒ</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">]</span> |
Now, in the component
, I can access the state
in the value [0] and display it in <h1> instead of hardcoded.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
import React, { useState } from 'react'; function App() { const value = useState(0); console.log(value); // [0, ƒ()] return ( <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> div</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> h1</span> <span class="token punctuation">></span></span> {value[0]} <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> h1</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> button</span> <span class="token punctuation">></span></span> Change! <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> button</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> div</span> <span class="token punctuation">></span></span> ); } |
Try to write briefly using array destructuring (it is similar to object destructuring, see my example below)
1 2 3 4 5 6 7 8 9 10 |
<span class="token keyword">const</span> person <span class="token operator">=</span> <span class="token punctuation">{</span> name <span class="token punctuation">:</span> <span class="token string">'Joe'</span> <span class="token punctuation">,</span> age <span class="token punctuation">:</span> <span class="token number">42</span> <span class="token punctuation">}</span> <span class="token punctuation">;</span> <span class="token comment">// creates 2 const values from person object</span> <span class="token keyword">const</span> <span class="token punctuation">{</span> name <span class="token punctuation">,</span> age <span class="token punctuation">}</span> <span class="token operator">=</span> person <span class="token punctuation">;</span> console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> name <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token comment">// 'Joe'</span> console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> age <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token comment">// 42</span> |
Results after using array destructuring in useState () hooks.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
import React, { useState } from 'react'; function App() { // đơn giản quá đúng không nào const [count] = useState(0); return ( <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> div</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> h1</span> <span class="token punctuation">></span></span> {count} <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> h1</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> button</span> <span class="token punctuation">></span></span> Change! <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> button</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> div</span> <span class="token punctuation">></span></span> ); } |
So I initialized the state
first. The next question is how to change state
value with hooks?
Remember that the useState () hook returns an array with 2 inputs. The second input is a function it uses to update the state
value.
1 2 |
<span class="token keyword">const</span> <span class="token punctuation">[</span> count <span class="token punctuation">,</span> setCount <span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token function">useState</span> <span class="token punctuation">(</span> <span class="token number">0</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> |
Of course, you can name it whatever you want, but by convention it is usually called with the “set-” prefix, and then any variable name you want to update.
It is very simple to use this function. Just call it and pass in the new value you want that state to! Or, like this.setState
in a component class, you can pass a function that takes the old state and returns a new state. Rule of thumb: do this any time you need to rely on the state
in the past to determine new state.
Try passing it on the onClick
with the function setCount
.
1 2 3 4 5 6 7 8 9 10 11 12 13 |
function App() { const [count, setCount] = useState(0); return ( <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> div</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> h1</span> <span class="token punctuation">></span></span> {count} <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> h1</span> <span class="token punctuation">></span></span> <button onClick={() => setCount(prevCount => prevCount + 1)}> Change! <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> button</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> div</span> <span class="token punctuation">></span></span> ); } |
Write it down a bit:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<span class="token keyword">function</span> <span class="token function">App</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">const</span> <span class="token punctuation">[</span> count <span class="token punctuation">,</span> setCount <span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token function">useState</span> <span class="token punctuation">(</span> <span class="token number">0</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token keyword">function</span> <span class="token function">change</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token function">setCount</span> <span class="token punctuation">(</span> prevCount <span class="token operator">=></span> prevCount <span class="token operator">+</span> <span class="token number">1</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">return</span> <span class="token punctuation">(</span> <span class="token operator"><</span> div <span class="token operator">></span> <span class="token operator"><</span> h1 <span class="token operator">></span> <span class="token punctuation">{</span> count <span class="token punctuation">}</span> <span class="token operator"><</span> <span class="token operator">/</span> h1 <span class="token operator">></span> <span class="token operator"><</span> button onClick <span class="token operator">=</span> <span class="token punctuation">{</span> change <span class="token punctuation">}</span> <span class="token operator">></span> Change <span class="token operator">!</span> <span class="token operator"><</span> <span class="token operator">/</span> button <span class="token operator">></span> <span class="token operator"><</span> <span class="token operator">/</span> div <span class="token operator">></span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> |
Try running up to see the results, everyone. Okay, so that’s it for the first hooks, next I will look into useEffect .
2. useEffect
If I had to know all the lifecycle methods before, with useEffect hooks simplified the situation.
The import method is similar with useState
1 2 |
<span class="token keyword">import</span> React <span class="token punctuation">,</span> <span class="token punctuation">{</span> useState <span class="token punctuation">,</span> useEffect <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span> <span class="token punctuation">;</span> |
To useEffect to do something, pass it an anonymous function. Whenever React re-render component, it will run the function that we passed in useEffect .
1 2 3 4 |
<span class="token function">useEffect</span> <span class="token punctuation">(</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token comment">/* any update can happen here */</span> <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> |
This is all the code so far.