how to: useState

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>
    )
}

how to: useState

Comments

More from this blog

React Hooks: useLayoutEffect

6 Tips To Achieve Your Goal

How to Deploy Your App to Netlify

5 Ways To Host Your Applications

Array methods that you should know

1. Hook definition

2. useState hook

3. Declaring state

4. Updating state

Command Palette

Comments

More from this blog

1. Hook definition

2. useState hook

3. Declaring state

4. Updating state