how to: useState
Furkan is a software engineer and frontend developer, whose main purpose is to create best optimal experience for user but also keeping the application or project as performant as possible.
He is deeply interested on web technologies and he is building new projects in this subject. He is especially familiar with React, Vue, Node and Java. You can check out what he built on his GitHub account. There is potential ways to connect with him at the end of this summary 👇
Things he like to do; ✔ Trying to solve other people's struggles ✔ Teaching or telling some subject he know to friends or colleagues ✔ Building different kinds of projects ✔ Meeting & talking with new people ✔ Listening podcasts ✔ Playing Chess ✔ Watching drama | sci-fi movies ✔ Listening music while I travelling or trying to fix problems ✔ Researching next generation technologies like cyptocurrency, IoT, smart devices
If you want to reach out with him, here is how you can do it;
🔼 Blog: https://blog.furkanozbek.com/ 🔼 GitHub: https://github.com/afozbek 🔼 Mail: abdullah.furkan.ozbek@gmail.com 🔼 Twitter: https://twitter.com/afozbek_ 🔼 Instagram: https://instagram.com/furkan.codes/
Thanks for reading ✨
1. Hook definition
A Hook is a special function that lets you “hook into” React features.
2. useState hook
useState is a Hook that lets you add React state to function components. We’ll learn other Hooks later.
Hooks don’t work inside classes. But you can use them instead of writing classes.
3. Declaring state
For declaring the state we would call useState function which accepts initialState.
import { useState } from "react"
function Counter() {
// count -> state which initialized by "0"
// setCount -> function that we can call if we want to change the state
const [count, setCount] = useState(0);
// inside of paranthesesis we can show the state
return <div>{count}</div>
}
4. Updating state
For changing the value of the state, we can call setCount.
import { useState } from "react"
function Counter() {
// count -> state which initialized by "0"
// setCount -> function that we can call if we want to change the state
const [count, setCount] = useState(0);
// inside of paranthesesis we can show the state
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => { setCount(count + 1) }}>Increment Counter</button>
</div>
)
}
