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> | |
); | |
} |
Yes a big infinite loop is the problem
@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 :)
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
FYI looks like this example errors in codesandbox due to infinite loop