useState

Learn counter state with useState.

What is useState?

useState is a React hook. It lets a component hold state. When state changes, the component re-renders and the screen updates.

Usage: const [count, setCount] = useState(0);. Here count is the current value and setCount is the function that changes it. 0 is the initial value.

You must import useState from the react package: import { useState } from 'react';.

Counter with useState

We will hold the counter with useState instead of a constant 0. This way the screen updates automatically as the value changes.

We will make two changes: first add the line import { useState } from 'react';; second place const [count, setCount] = useState(0); inside the App component.

Finally we will replace the 0 in <Text>Counter: 0</Text> with {count}.

Exercise Add useState

Add useState to the existing skeleton. Import useState from react. Inside the App component declare const [count, setCount] = useState(0);. Show Counter: {count} inside <Text>.

Show example solution

import { View, Text } from 'react-native';
import { useState } from 'react';

export default function App() {
  const [count, setCount] = useState(0);
  return (
    <View>
      <Text>Counter: {count}</Text>
    </View>
  );
}

Test yourself

useState call

const [count, setCount] = ____(0);

Show answer

const [count, setCount] = useState(0);

How do you use useState?
- const count = useState(0);
- const [count] = useState;
- const [count, setCount] = useState(0);
- const setCount = useState(0);
Show answer

const [count, setCount] = useState(0); — useState returns a value and a setter.
Match the useState parts

useState

Hook
count

Value
setCount

Setter
0

Initial value

Next lesson: Increment and decrement

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies