1. Introduction
In this article, I will introduce to you about Custom Hooks
as well as some Hooks
that the familiar libraries of React
support.
2. React Hook
f. Custom Hook
In addition to using the Hooks
that React provided for us as some of which I have introduced before, React also allows us to create our own Custom Hook
Hooks
or you can understand simply as separate Hooks
by yourself. create. Inside the Hooks
create this you absolutely can use always the Hook
that has provided such React useState
, useReducer
, useEffect
, useMemo
, useCallback
…. The purpose of creating this Custom Hook
as React documents says it will help us:
Building your own Hooks lets you extract component logic into reusable functions.
Or is it more accurate in supporting us in splitting the logic into Hooks
so we can reuse it more easily or simply trim our components? To create a Custom Hook
we will need to create a new function and this function must start with the use keyword as the name of the other React Hook
. Because it is a function, of course, we can also accept the parameters we pass and return the results we want. Let’s go to an example as follows, if you go to Medium and choose to read any article will see that every time you scroll down the header of the site will be hidden. Conversely, if you only scroll the mouse on one, the header will immediately be displayed again. Now we will try to build a header with the same function. The code will look like this:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 | <span class="token keyword">const</span> <span class="token function-variable function">Header</span> <span class="token operator">=</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token keyword">const</span> <span class="token punctuation">[</span> style <span class="token punctuation">,</span> setStyle <span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token function">useState</span> <span class="token punctuation">(</span> <span class="token punctuation">{</span> <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <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 keyword">const</span> <span class="token function-variable function">handleChangeHeaderStyle</span> <span class="token operator">=</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token keyword">if</span> <span class="token punctuation">(</span> document <span class="token punctuation">.</span> body <span class="token punctuation">.</span> <span class="token function">getBoundingClientRect</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">.</span> top <span class="token operator">></span> scrollPos <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">// Nếu scroll chuột lên</span> <span class="token function">setStyle</span> <span class="token punctuation">(</span> <span class="token punctuation">{</span> <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span> <span class="token comment">// Nếu scroll chuột xuống</span> <span class="token function">setStyle</span> <span class="token punctuation">(</span> <span class="token punctuation">{</span> transform <span class="token punctuation">:</span> <span class="token string">"translateY(-100%)"</span> <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> scrollPos <span class="token operator">=</span> document <span class="token punctuation">.</span> body <span class="token punctuation">.</span> <span class="token function">getBoundingClientRect</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">.</span> top <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">;</span> <span class="token keyword">let</span> scrollPos <span class="token operator">=</span> <span class="token number">0</span> <span class="token punctuation">;</span> window <span class="token punctuation">.</span> <span class="token function">addEventListener</span> <span class="token punctuation">(</span> <span class="token string">"scroll"</span> <span class="token punctuation">,</span> handleChangeHeaderStyle <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token keyword">return</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> window <span class="token punctuation">.</span> <span class="token function">removeEventListener</span> <span class="token punctuation">(</span> <span class="token string">"scroll"</span> <span class="token punctuation">,</span> handleChangeHeaderStyle <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">,</span> <span class="token punctuation">[</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 className <span class="token operator">=</span> <span class="token string">"App"</span> <span class="token operator">></span> <span class="token operator"><</span> div className <span class="token operator">=</span> <span class="token string">"App__header"</span> style <span class="token operator">=</span> <span class="token punctuation">{</span> style <span class="token punctuation">}</span> <span class="token operator">></span> <span class="token constant">HEADER</span> <span class="token operator"><</span> <span class="token operator">/</span> div <span class="token operator">></span> <span class="token operator"><</span> div className <span class="token operator">=</span> <span class="token string">"App__seperator"</span> <span class="token operator">/</span> <span class="token operator">></span> <span class="token operator"><</span> div className <span class="token operator">=</span> <span class="token string">"App__body"</span> <span class="token operator">></span> <span class="token operator"><</span> h1 <span class="token operator">></span> <span class="token constant">TITLE</span> <span class="token operator"><</span> <span class="token operator">/</span> h1 <span class="token operator">></span> <span class="token operator"><</span> p <span class="token operator">></span> <span class="token constant">SOME</span> <span class="token constant">LONG</span> <span class="token constant">CONTENT</span> <span class="token operator"><</span> <span class="token operator">/</span> p <span class="token operator">></span> <span class="token operator"><</span> <span class="token operator">/</span> div <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> <span class="token punctuation">;</span> |
Here I apply the Hook
shown in the previous articles, useState
and useEffect
. Basically the above code you can understand the idea here is:
- When we scroll down, we will use the style to hide the header by letting it
translateY(-100%)
, otherwise it will display as the original. - This
style
part we will not have in a local state usinguseState
- Next we use
useEffect
to listen to the scroll scroll event on the page and change thestyle
to suit the event.
The results you can see here: https://codesandbox.io/s/usescrollhook-tceov
With the above code everything is delicious because we achieve the desired goal. However, in case your web has more responsive for mobile and of course also needs the aforementioned features, how do we handle it? Of course, we can simply copy the code and paste it back into the component file of the header for mobile use and usually there is no problem here. . However, because this is an example, after this code is changed later and there are more style changes than just translateY(-100%)
, at this time, you will have to remember to fix both files. Or from the start we can create a Hooks
are shared with both mobile and desktop versions. To do this very simply, we will create a new file as follows:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | <span class="token keyword">import</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> <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token keyword">function</span> <span class="token function">useScollHook</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> style <span class="token punctuation">,</span> setStyle <span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token function">useState</span> <span class="token punctuation">(</span> <span class="token punctuation">{</span> <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <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 keyword">const</span> <span class="token function-variable function">handleChangeHeaderStyle</span> <span class="token operator">=</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token keyword">if</span> <span class="token punctuation">(</span> document <span class="token punctuation">.</span> body <span class="token punctuation">.</span> <span class="token function">getBoundingClientRect</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">.</span> top <span class="token operator">></span> scrollPos <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token function">setStyle</span> <span class="token punctuation">(</span> <span class="token punctuation">{</span> <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span> <span class="token function">setStyle</span> <span class="token punctuation">(</span> <span class="token punctuation">{</span> transform <span class="token punctuation">:</span> <span class="token string">"translateY(-100%)"</span> <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> scrollPos <span class="token operator">=</span> document <span class="token punctuation">.</span> body <span class="token punctuation">.</span> <span class="token function">getBoundingClientRect</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">.</span> top <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">;</span> <span class="token keyword">let</span> scrollPos <span class="token operator">=</span> <span class="token number">0</span> <span class="token punctuation">;</span> window <span class="token punctuation">.</span> <span class="token function">addEventListener</span> <span class="token punctuation">(</span> <span class="token string">"scroll"</span> <span class="token punctuation">,</span> handleChangeHeaderStyle <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token keyword">return</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> window <span class="token punctuation">.</span> <span class="token function">removeEventListener</span> <span class="token punctuation">(</span> <span class="token string">"scroll"</span> <span class="token punctuation">,</span> handleChangeHeaderStyle <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">,</span> <span class="token punctuation">[</span> <span class="token punctuation">]</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token keyword">return</span> style <span class="token punctuation">;</span> <span class="token punctuation">}</span> |
As I said initially the Custom Hook
you create must have a name starting with the use keyword. As you can see this is simply a useScrollHook
function, it takes no parameters and the result here is an object named style
. Here I have copied the entire logic related to changing the style header including the useState
and useEffect
part of the original component and put into this new function. Now in the Header
component we just need to rewrite the following:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <span class="token keyword">import</span> useScrollHook <span class="token keyword">from</span> <span class="token string">'./useScrollHook'</span> <span class="token punctuation">;</span> <span class="token keyword">const</span> <span class="token function-variable function">Header</span> <span class="token operator">=</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token keyword">const</span> style <span class="token operator">=</span> <span class="token function">useScrollHook</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 className <span class="token operator">=</span> <span class="token string">"App"</span> <span class="token operator">></span> <span class="token operator"><</span> div className <span class="token operator">=</span> <span class="token string">"App__header"</span> style <span class="token operator">=</span> <span class="token punctuation">{</span> style <span class="token punctuation">}</span> <span class="token operator">></span> <span class="token constant">HEADER</span> <span class="token operator"><</span> <span class="token operator">/</span> div <span class="token operator">></span> <span class="token operator"><</span> div className <span class="token operator">=</span> <span class="token string">"App__seperator"</span> <span class="token operator">/</span> <span class="token operator">></span> <span class="token operator"><</span> div className <span class="token operator">=</span> <span class="token string">"App__body"</span> <span class="token operator">></span> <span class="token operator"><</span> h1 <span class="token operator">></span> <span class="token constant">TITLE</span> <span class="token operator"><</span> <span class="token operator">/</span> h1 <span class="token operator">></span> <span class="token operator"><</span> p <span class="token operator">></span> <span class="token constant">SOME</span> <span class="token constant">LONG</span> <span class="token constant">CONTENT</span> <span class="token operator"><</span> <span class="token operator">/</span> p <span class="token operator">></span> <span class="token operator"><</span> <span class="token operator">/</span> div <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> <span class="token punctuation">;</span> |
As you can see your code is much neater than the original and at the same time in the component for the mobile header, you just need to import the newly created Hook
and use it as above. In fact, in my project I also use Custom Hook
a lot because I want to try using React’s new technology to see how it works. . Personally, I feel that using Custom Hook
gives me some benefits such as:
- Separate the logical part into a separate file to make it compact for the main component. Your component should now only contain most UI-related code.
- In case you just need to fix the style for that component, you will not have to scroll too much because the logic is no longer in this place but only the UI.
- In case you need to fix a specific logic, such as the scroll function above, you only need to open the
Hook
serve that logic instead of scrolling to find the function in charge of this.
Of course, as I said above, your Custom Hook
can take any parameter and use it:
1 2 3 4 5 6 7 8 9 10 | <span class="token keyword">const</span> <span class="token function-variable function">useDemoHook</span> <span class="token operator">=</span> <span class="token punctuation">(</span> param1 <span class="token punctuation">,</span> param2 <span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token comment">// Do anything you want</span> <span class="token keyword">return</span> result <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">const</span> <span class="token function-variable function">DemoComponent</span> <span class="token operator">=</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token keyword">const</span> result <span class="token operator">=</span> <span class="token function">useDemoHook</span> <span class="token punctuation">(</span> <span class="token string">'Hello'</span> <span class="token punctuation">,</span> <span class="token string">'Hi'</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">;</span> |
Or it can return more than just one result variable, we can return many results and even return a function as follows:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 | <span class="token keyword">const</span> <span class="token function-variable function">useLoginHook</span> <span class="token operator">=</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token keyword">const</span> <span class="token punctuation">[</span> formData <span class="token punctuation">,</span> setFormData <span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token function">useState</span> <span class="token punctuation">(</span> <span class="token punctuation">{</span> email <span class="token punctuation">:</span> <span class="token string">''</span> <span class="token punctuation">,</span> password <span class="token punctuation">:</span> <span class="token string">''</span> <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token keyword">function</span> <span class="token function">handleInputChange</span> <span class="token punctuation">(</span> event <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">// Handle change email or password input</span> <span class="token punctuation">}</span> <span class="token keyword">function</span> <span class="token function">handleLogin</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">// Handle login</span> <span class="token punctuation">}</span> <span class="token keyword">return</span> <span class="token punctuation">[</span> formData <span class="token punctuation">,</span> handleInputChange <span class="token punctuation">,</span> handleLogin <span class="token punctuation">]</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">const</span> <span class="token function-variable function">DemoComponent</span> <span class="token operator">=</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token keyword">const</span> <span class="token punctuation">[</span> formData <span class="token punctuation">,</span> handleInputChange <span class="token punctuation">,</span> handleLogin <span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token function">useLoginHook</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 className <span class="token operator">=</span> <span class="token string">"form"</span> <span class="token operator">></span> <span class="token operator"><</span> input name <span class="token operator">=</span> <span class="token string">"email"</span> value <span class="token operator">=</span> <span class="token punctuation">{</span> formData <span class="token punctuation">.</span> email <span class="token punctuation">}</span> onChange <span class="token operator">=</span> <span class="token punctuation">{</span> handleInputChange <span class="token punctuation">}</span> <span class="token operator">/</span> <span class="token operator">></span> <span class="token operator"><</span> input name <span class="token operator">=</span> <span class="token string">"password"</span> value <span class="token operator">=</span> <span class="token punctuation">{</span> formData <span class="token punctuation">.</span> password <span class="token punctuation">}</span> onChange <span class="token operator">=</span> <span class="token punctuation">{</span> handleInputChange <span class="token punctuation">}</span> <span class="token operator">/</span> <span class="token operator">></span> <span class="token operator"><</span> button onClick <span class="token operator">=</span> <span class="token punctuation">{</span> handleLogin <span class="token punctuation">}</span> <span class="token operator">></span> <span class="token constant">LOGIN</span> <span class="token operator"><</span> <span class="token operator">/</span> button <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> |
As you can see with the above example, instead of writing a lot of logic related to the login into that component as:
- Change the input content
- Validate the input text is valid
- Send data to the server to login
Now, by splitting into Custom Hooks
, our component now accepts only what it needs and the component becomes much more neat.
3. Hook in other popular libraries
a. React Redux
With Hook
which offers the React react-redux
has also supported us use Hooks
with three Hook
respectively:
useSelector()
: Allows you to retrieve data from the redux store – acts likemapStateToProps
in theconnect()
function we used before. Details: https://react-redux.js.org/api/hooks#useselectoruseDispatch()
: Allows us to dispatch an action to redux – which acts likemapDispatchToProps
in theconnect()
function we used before. Details: https://react-redux.js.org/api/hooks#usedispatchuseStore()
: Gives us direct access to the store object in redux and calls to functions likestore.getState()
, …. Details: https://react-redux.js.org/api/hooks#usestore
Example of using useSelector()
and connect()
:
1 2 3 4 5 6 7 8 9 10 11 12 | <span class="token comment">// connect()</span> <span class="token keyword">const</span> <span class="token function-variable function">mapStateToProps</span> <span class="token operator">=</span> state <span class="token operator">=></span> <span class="token punctuation">(</span> <span class="token punctuation">{</span> posts <span class="token punctuation">:</span> state <span class="token punctuation">.</span> posts <span class="token punctuation">,</span> <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token function">connect</span> <span class="token punctuation">(</span> mapStateToProps <span class="token punctuation">)</span> <span class="token punctuation">(</span> SomeComponent <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token comment">// useSelector</span> <span class="token keyword">const</span> <span class="token function-variable function">SomeComponent</span> <span class="token operator">=</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> posts <span class="token operator">=</span> <span class="token function">useSelector</span> <span class="token punctuation">(</span> state <span class="token operator">=></span> state <span class="token punctuation">.</span> posts <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> |
As you can see, the results here are similar and the results are similar if you use useDispatch()
.
b. React Router
If before, to get access to information related to the router, all we need to do is wrap our component into the withRouter
component. However, in the latest version, React Router
has allowed us to access router-related information through a number of Hook
as follows:
useHistory
: allows us to access the objecthistory
to be able to perform operations related to changing the url, for example from documents:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <span class="token keyword">import</span> <span class="token punctuation">{</span> useHistory <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"react-router-dom"</span> <span class="token punctuation">;</span> <span class="token keyword">function</span> <span class="token function">HomeButton</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">let</span> history <span class="token operator">=</span> <span class="token function">useHistory</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token keyword">function</span> <span class="token function">handleClick</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> history <span class="token punctuation">.</span> <span class="token function">push</span> <span class="token punctuation">(</span> <span class="token string">"/home"</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> button type <span class="token operator">=</span> <span class="token string">"button"</span> onClick <span class="token operator">=</span> <span class="token punctuation">{</span> handleClick <span class="token punctuation">}</span> <span class="token operator">></span> Go home <span class="token operator"><</span> <span class="token operator">/</span> button <span class="token operator">></span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> |
useLocation
: if you simply need to include the content in the current url in the objectlocation
, this is the hook you need instead of taking the whole fromwithRouter
. example from documents:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | <span class="token keyword">import</span> React <span class="token keyword">from</span> <span class="token string">"react"</span> <span class="token punctuation">;</span> <span class="token keyword">import</span> ReactDOM <span class="token keyword">from</span> <span class="token string">"react-dom"</span> <span class="token punctuation">;</span> <span class="token keyword">import</span> <span class="token punctuation">{</span> BrowserRouter <span class="token keyword">as</span> Router <span class="token punctuation">,</span> Switch <span class="token punctuation">,</span> useLocation <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"react-router-dom"</span> <span class="token punctuation">;</span> <span class="token keyword">function</span> <span class="token function">usePageViews</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">let</span> location <span class="token operator">=</span> <span class="token function">useLocation</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> React <span class="token punctuation">.</span> <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> ga <span class="token punctuation">.</span> <span class="token function">send</span> <span class="token punctuation">(</span> <span class="token punctuation">[</span> <span class="token string">"pageview"</span> <span class="token punctuation">,</span> location <span class="token punctuation">.</span> pathname <span class="token punctuation">]</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">,</span> <span class="token punctuation">[</span> location <span class="token punctuation">]</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <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 function">usePageViews</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 operator"><</span> Switch <span class="token operator">></span> <span class="token operator">...</span> <span class="token operator"><</span> <span class="token operator">/</span> Switch <span class="token operator">></span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> ReactDOM <span class="token punctuation">.</span> <span class="token function">render</span> <span class="token punctuation">(</span> <span class="token operator"><</span> Router <span class="token operator">></span> <span class="token operator"><</span> App <span class="token operator">/</span> <span class="token operator">></span> <span class="token operator"><</span> <span class="token operator">/</span> Router <span class="token operator">></span> <span class="token punctuation">,</span> node <span class="token punctuation">)</span> <span class="token punctuation">;</span> |
useParams
: in case your router takes parameters and you want to reuse it in a component, use these hooks. For example:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | <span class="token keyword">import</span> React <span class="token keyword">from</span> <span class="token string">"react"</span> <span class="token punctuation">;</span> <span class="token keyword">import</span> ReactDOM <span class="token keyword">from</span> <span class="token string">"react-dom"</span> <span class="token punctuation">;</span> <span class="token keyword">import</span> <span class="token punctuation">{</span> BrowserRouter <span class="token keyword">as</span> Router <span class="token punctuation">,</span> Switch <span class="token punctuation">,</span> Route <span class="token punctuation">,</span> useParams <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"react-router-dom"</span> <span class="token punctuation">;</span> <span class="token keyword">function</span> <span class="token function">BlogPost</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">let</span> <span class="token punctuation">{</span> slug <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">useParams</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 operator"><</span> div <span class="token operator">></span> Now showing post <span class="token punctuation">{</span> slug <span class="token punctuation">}</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> ReactDOM <span class="token punctuation">.</span> <span class="token function">render</span> <span class="token punctuation">(</span> <span class="token operator"><</span> Router <span class="token operator">></span> <span class="token operator"><</span> Switch <span class="token operator">></span> <span class="token operator"><</span> Route exact path <span class="token operator">=</span> <span class="token string">"/"</span> <span class="token operator">></span> <span class="token operator"><</span> HomePage <span class="token operator">/</span> <span class="token operator">></span> <span class="token operator"><</span> <span class="token operator">/</span> Route <span class="token operator">></span> <span class="token operator"><</span> Route path <span class="token operator">=</span> <span class="token string">"/blog/:slug"</span> <span class="token operator">></span> <span class="token operator"><</span> BlogPost <span class="token operator">/</span> <span class="token operator">></span> <span class="token operator"><</span> <span class="token operator">/</span> Route <span class="token operator">></span> <span class="token operator"><</span> <span class="token operator">/</span> Switch <span class="token operator">></span> <span class="token operator"><</span> <span class="token operator">/</span> Router <span class="token operator">></span> <span class="token punctuation">,</span> node <span class="token punctuation">)</span> <span class="token punctuation">;</span> |
4. End of lesson
The series of posts related to Hook
in my React is here for the end. If you have any questions or find yourself wrong, please comment below to let me know. Thanks for reading and don’t forget to leave an upvote