This repository has been archived by the owner on Jul 24, 2022. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 0
/
custom-react-hooks.html
43 lines (37 loc) · 3.06 KB
/
custom-react-hooks.html
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
39
40
41
42
43
<!doctype html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1"><meta http-equiv="X-UA-Compatible" content="ie=edge"><meta name="description" content="Custom hooks allow you to create simple extensions of existing React hooks to better suit your needs."><!-- Bing --><meta name="msvalidate.01" content="45CBBE1BD8265A2217DFDA630EB8F84A" /><title>Tiny Brain Fans - Custom React Hooks</title><link rel="stylesheet" href="tinystyle.css"></head><body>
<main id="main"><article id="content"><h1 id="title">Custom React Hooks</h1><p>Custom hooks allow you to create simple extensions of existing <a href="react.html">React</a> hooks to better suit your needs.</p>
<p>It is highly recommended that you review what <a href="react-hooks.html">hooks</a> are first before getting into this, as we are using <code>useEffect</code> and <code>useState</code>.</p>
<h2>Your First Hook</h2>
<p><em>This example is taken from <a href="https://www.youtube.com/watch?v=6ThXsUwLWvc" target="_blank">Web Dev Simplified</a>.</em></p>
<p>This custom hook will log whenever your input value changes.</p>
<p><strong>useUpdateLogger.js</strong></p>
<pre><code class="language-javascript">import { useEffect } from 'react';
const useUpdateLogger = (value) => {
useEffect(() => console.log(value), [value]);
};
export default useUpdateLogger;
</code></pre>
<p>When we use this in our project, it will log to the console whenever there is a change to the variable that was given.</p>
<p><strong>ExampleComponent.jsx</strong></p>
<pre><code class="language-react">import React, { useState } from 'react';
import useUpdateLogger from './useUpdateLogger';
const App = () => {
const [counter, setCounter] = useState(0);
useUpdateLogger(counter);
return (
<div>
<button
type="button"
onClick={() => setCounter(counter + 1)}
>Increment</button>
</div>
);
};
export default App;
</code></pre>
<h2>References</h2>
<ul>
<li><a href="https://www.youtube.com/watch?v=6ThXsUwLWvc" target="_blank">https://www.youtube.com/watch?v=6ThXsUwLWvc</a></li>
<li><a href="https://blog.webdevsimplified.com/2019-11/how-to-write-custom-hooks/" target="_blank">https://blog.webdevsimplified.com/2019-11/how-to-write-custom-hooks/</a></li>
</ul>
<section id="backlinks"><details><summary>Backlinks</summary><ul><li><a href="react-hooks.html">React Hooks</a></li></ul></details></section><p class="last-modified">Last modified: 202206101419</p></article></main><footer><nav><a href="index.html">Sitemap</a></nav><div class="social"><p>Built using <a href="http://codeberg.org/milofultz/swiki" target="_blank" rel="noopener noreferrer">{{SWIKI}}</a></p><p><a href="http://codeberg.org/milofultz/" target="_blank" rel="noopener noreferrer">Codeberg</a></p><p><a href="http://milofultz.com/" target="_blank" rel="noopener noreferrer">milofultz.com</a></p><p><a href="https://merveilles.town/@milofultz" target="_blank" rel="me noopener noreferrer">Mastodon</a></p></div></footer></body></html>