Last active
September 9, 2020 00:11
-
-
Save gragland/5ed9a4bd45a7775a5802e35de93fc3b6 to your computer and use it in GitHub Desktop.
React Hook recipe from https://usehooks.com. Demo: https://codesandbox.io/s/jjxypyk86w
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { useState, useMemo } from 'react'; | |
// Usage | |
function App() { | |
// State for our counter | |
const [count, setCount] = useState(0); | |
// State to keep track of current word in array we want to show | |
const [wordIndex, setWordIndex] = useState(0); | |
// Words we can flip through and view letter count | |
const words = ['hey', 'this', 'is', 'cool']; | |
const word = words[wordIndex]; | |
// Returns number of letters in a word | |
// We make it slow by including a large and completely unnecessary loop | |
const computeLetterCount = word => { | |
let i = 0; | |
while (i < 1000000000) i++; | |
return word.length; | |
}; | |
// Memoize computeLetterCount so it uses cached return value if input array ... | |
// ... values are the same as last time the function was run. | |
const letterCount = useMemo(() => computeLetterCount(word), [word]); | |
// This would result in lag when incrementing the counter because ... | |
// ... we'd have to wait for expensive function when re-rendering. | |
//const letterCount = computeLetterCount(word); | |
return ( | |
<div style={{ padding: '15px' }}> | |
<h2>Compute number of letters (slow 🐌)</h2> | |
<p>"{word}" has {letterCount} letters</p> | |
<button | |
onClick={() => { | |
const next = wordIndex + 1 === words.length ? 0 : wordIndex + 1; | |
setWordIndex(next); | |
}} | |
> | |
Next word | |
</button> | |
<h2>Increment a counter (fast ⚡️)</h2> | |
<p>Counter: {count}</p> | |
<button onClick={() => setCount(count + 1)}>Increment</button> | |
</div> | |
); | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
@danielsdesk @vinayakshahdeo Thanks for letting me know. It wasn't actually an infinite loop, but Codesandbox didn't like the intentional 1,000,000,000 iterations in the
computeLetterCount
function. I was able to disable infinite loop protection so that the Codesandbox runs now :)