Learn useState In 15 Minutes - React Hooks Explained

Web Dev Simplified · 1.4M views · 2020 · 15:45

Open on YouTube

Web developmenttutorial

Why Stack Overflow recommends it

Stack Overflow users link it when answering beginners who are confused about state in function components or who are just getting started with React hooks.

Recommended by 3 people across 3 different months, 2020 to 2023.

What it is

A 15-minute tutorial from Web Dev Simplified on React's useState hook. It covers the basics of hooks, converting class component state to function component state, and how to use useState in practice. It is the first in a series on React hooks.

What people said

Recommends Manwej · 2020-10 · Stack Overflow · on “React Function Component use variable (not state)”

In my experience you don't use the this keyword when working with function components. Instead you use hooks like useState. Check the following video for getting started with hooks: [this video]

Recommends andrilla · 2022-12 · Stack Overflow · on “I am not able to switch from dark mode back to normal mode”

@AbhinavBasu In your example, you used `let mode = "light"`, which doesn't use `useState()`. Perhaps you've tried `useState()` for this before, though. In that case, my guess is you must have just done something wrong when using it. If you're new to `useState()`, you should lookup a tutorial that explains `useState()` in full. Here's one I like: Learn useState In 15 Minutes - React Hooks Explained [this video]

Recommends YuryDG · 2023-02 · Stack Overflow · on “api request not working in React when i set a parameter?”

Hello Campton, useEffect can be your best friend or your deadly enemy, be careful with that. In your case, you need to search using a debounce. There are several ways to achieve that. This will solve your problem but it will take you to a dark place with other problems like stale closure, cancel requests, etc. useEffect(() => { axios.get(` [LINK] ) .then(res => setproducts(res.data)) },[input]) I strongly recommend you take a look at this short video React Hooks explained [this video] to get a better understanding of hooks in general before going deep in useEffect . There is a nice library called react-query [LINK] that will save a lot of time when dealing with Rest API. Read this 2nd article and

Cites Murad · 2022-02 · Stack Overflow · on “React hooks - Can't use hook inside plain async function?”

Hooks are functions that let you “hook into” React state and lifecycle features from function components. Hooks don’t work inside classes — they let you use React without classes. You can not put hooks inside if statements, functions, loops and they can't be nested in anything [this video] . Hooks can only be called inside the top level of the body of a function component. Read the official documentation [LINK] .

Cites poeticider · 2022-04 · Stack Overflow · on “setting up a React Sandbox for beginners...dependencies error?”

Basically spent half a day trying to set this up with no luck. I have been using npx create-react-app like in this video [this video] but I receive the following: Installing template dependencies using npm... npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve dependency tree npm ERR! npm ERR! While resolving: testfile@0.1.0 npm ERR! Found: react@18.0.0 npm ERR! node_modules/react npm ERR! react@"^18.0.0" from the root project npm ERR! npm ERR! Could not resolve dependency: npm ERR! peer react@"<18.0.0" from @testing-library/react@12.1.5 broken) dependency resolution. npm ERR! the root project I have seen here create-react-app dependency version issues with React 18 [LINK] that there may b