10 React Hooks Explained // Plus Build your own from Scratch
Why Stack Overflow recommends it
Stack Overflow users link it in answers about React errors and state updates when they want to give askers a broader explanation of how hooks work.
Recommended by 3 people across 3 different months, 2021 to 2022.
What it is
A fast-paced Fireship tutorial that walks through all the built-in React hooks, including useState, useEffect, useContext, useRef, useReducer, useMemo, useCallback, useImperativeHandle, useLayoutEffect and useDebugValue. It finishes by showing how to write a custom hook from scratch.
What people said
Recommends Nemesis · 2021-04 · Stack Overflow · on “React file throws error Cannot read property 'style' of undefined only when I refresh the page”
Your problem is a quite simple problem to solve. Since you are calling the showSlides() function before the actual component is created it will try to get an element that does not exist, hence the "Cannot read property of undefined " error. To fix this you can simply add a useEffect() hook which runs the showSlides() function once the component is mounted. If you want a more in depth explanation I recommend watching Fireship's tutorial on React hooks. Here is a link for that: [this video] Here is a fixed version of your code! // Initially displaying first slide: var slideIndex = 1; // Getting current slide from navigation dot function currentSlide(n) { console.log("pressed on the dot: " + n); sho
Recommends Hyperx837 · 2022-07 · Stack Overflow · on “Can I execute a function after setState is finished updating?”
Although this question is approached by a class component since the new recommended way of creating components is by functions, this answer addresses the problem from the functional hooks that react introduced on React v16 import { useState, useEffect } from "react"; const App = () => { const [count, setCount] = useState(0); useEffect(() => console.log(count), [count]); return ( <div> <span>{count}</span> <button onClick={() => setCount(count + 1)}>Click Me</button> </div> ); }; as you can see in this example this is a simple counter component. but the useEffect hook of this example has a second argument as an array of dependencies (a dependent state that it might rely on). so the hook only
Recommends Gaurav Roy · 2022-08 · Stack Overflow · on “difference between const and function and the meaning of const [A, B] in react native”
Ahh , see for first its mostly a Javascript thing. in RN we return JSX const Hello = () => { return ( <div>hello</div> ) } stands for const fun = () => {} And this Hello() { return ( <div>Hello</div> ) } stands for function fun() {} Thats it. For point 2 : const [name, setName] = useState ("johndoe") // 0 is default value useState is a hook , which is a react feature, here for suppose you want a variable called name and you want to display it in your app. IF you just do let name = "johndoe" in react and render it, it will display john doe . But if you update its value like name = "messi" , in app screen it will still display john doe rather than messi . Hence there's useState which rerenders