Why is the return a function? return () => { ignore = true }; From the docs, Why did we return a function from our effect? This is the optional cleanup mechanism for effects. Every effect may return a function that cleans up after it. This lets us keep the logic for adding and removing … Read more
Yes, there’s a similar (but not the same!) substitute for componentDidMount with hooks, and it’s the useEffect hook. The other answers don’t really answer your question about where you can make API calls. You can make API calls by using useEffect and passing in an empty array or object as the second argument as a … Read more
First of all, the span element with the click event needs to have a name property otherwise, there will be no name to find within the e.target. With that said, e.target.name is reserved for form elements (input, select, etc). So to actually tap into the name property you’ll have to use e.target.getAttribute(“name”) Additionally, because you … Read more
You can pass JSON.stringify(outcomes) as the dependency list: Read more here useEffect(() => { console.log(outcomes) }, [JSON.stringify(outcomes)])
The easiest solution is to use a local variable that keeps track of whether the component is mounted or not. This is a common pattern with the class based approach. Here is an example that implement it with hooks: function Example() { const [text, setText] = React.useState(“waiting…”); React.useEffect(() => { let isCancelled = false; simulateSlowNetworkRequest().then(() … Read more
Create an async function inside your effect that wait the getData(1) result then call setData(): useEffect(() => { const fetchData = async () => { const data = await getData(1); setData(data); } fetchData(); }, []);
This is best used when you want to prevent unnecessary re-renders for better performance. Compare these two ways of passing callbacks to child components taken from React Docs: 1. Arrow Function in Render class Foo extends Component { handleClick() { console.log(‘Click happened’); } render() { return <Button onClick={() => this.handleClick()}>Click Me</Button>; } } 2. Bind … Read more
I believe no one has answered your question exactly. I’m still also understanding the benefits and purpose of having this extra feature called hooks, but I can still share my understanding. React Hooks are JS functions with the power of react, it means that you can add some logic that you could also add into … Read more
Updated: 2018-Dec New version of react-hot-loader is out now, link. Hooks is now working out of the box. Thank to the author, theKashey. Check out this boilerplate https://github.com/ReeganExE/react-hooks-boilerplate React Hooks React Hot Loader Webpack, Babel, ESLint Airbnb Previous Answer: First, make sure you installed react@next and react-dom@next. Then check for you are using react-hot-loader or … Read more
Your code, after an if statement that contains return, is equivalent to an else branch: if(!firebase.getCurrentUsername()) { … return null } else { useEffect(…) … } Which means that it’s executed conditionally (only when the return is NOT executed). To fix: useEffect(() => { if(firebase.getCurrentUsername()) { firebase.getCurrentUserQuote().then(setQuote) } }, [firebase.getCurrentUsername(), firebase.getCurrentUserQuote()]) if(!firebase.getCurrentUsername()) { … return … Read more