useState() Hook in Next.JS - React Hooks

useState() Hook in Next.JS - React Hooks

3 min read · 431 words · Shared 24 days ago by

Article Summary: Learn what useState is and learn how to use useState in Next.JS by coding some examples.

Hooks Overview

React Hooks were introducted React 16.8. They allow you to create stateful components without writing a class. For more info, check out an article we wrote on the useEffect hook.

What is useState Hook?

The useState hook lets you manage state throughout your application. Let's take a look at an example.

What does calling useState do?

Simply put, a state variable persists the state throughout the lifecycle of your application instead of dissapearing when the function is exited.

useState Hook Example

import React, { useState } from 'react';

function Example() {
  // Declare a new state variable, which we'll call "count"
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

The example above is from the React docs. As you can see, we are storing the count inside a state variable.

We can access the count from the count variable and we can change the count using the setCount function.

More Complex Example

You can also store more than a simple number in a state variable. Let's look at some examples.

const [count, setCount] = useState(0);
const [name, setName] = useState('Max');
const [items, setItems] = useState([1, 2, 3]);
const [bool, setBool] = useState(true);
const [obj, setObj] = useState({ a: 1, b: 2 });
const [null, setNull] = useState(null);

As you can see, we can store ints, strings, arrays, booleans, objects, nulls, custom objects, and more inside of a useState variable.

Uses of useState

A cool use of useState is to dynamically change a css value. Maybe as the user scrolls, we want to change the font-size of the text.

const [fontSize, setFontSize] = useState('10px')
const handleScroll = () => {
    setFontSize(window.scrollY + "px")
}

...

<p style={{ fontSize: fontSize }}>
    Hello World
</p>

The p tag above will increase in size as the user scrolls down the page!

Enjoyed this article on useState? Exmplore more React hooks!

Published on December 30, 2021 (24 days ago)

Related Tags

    #react

Related Posts

Next.js Progressive Web App · 20 days ago
Add Algolia's InstantSearch to Next.js - A Quickstart · December 17, 2021
Next/Image Doesn't Fill Parent Div! · November 1, 2021
Chakra UI Menu Dropdown on Hover · October 27, 2021
Generate A Dynamic Sitemap In Next.js Website · September 27, 2021

Email Newsletter

On This Page

Hooks Overview

What is `useState` Hook?

What does calling useState do?

`useState` Hook Example

More Complex Example

Uses of `useState`

View Related Posts

20 days ago

nextjs-light.png

Next.js Progressive Web App

December 17, 2021

algolia.png

Add Algolia's InstantSearch to Next.js - A Quickstart

November 1, 2021

nextjs-light.png

Next/Image Doesn't Fill Parent Div!

October 27, 2021

chakra-ui.png

Chakra UI Menu Dropdown on Hover

September 27, 2021

nextjs-light.png

Generate A Dynamic Sitemap In Next.js Website

September 26, 2021

firebase.png
Build A Todo Web App Using Next.js, Firebase, Chakra UI + React Hooks

Build A Todo Web App Using Next.js, Firebase, Chakra UI + React Hooks

August 29, 2021

chakra-ui.png

Advanced Chakra UI

August 9, 2021

react.png

useEffect() Hook in Next.JS - React Hooks

July 20, 2021

splitbee.png

Add Splitbee Analytics To Next.js

July 10, 2021

nextjs-light.png

Next.js Crash Course

May 10, 2021

nextjs-light.png

Next.js + MDX Pages Quickstart

May 1, 2021

utterances.png

Add Comments To React/Next.js Website

April 29, 2021

google-analytics.png

Add Google Analytics To Next.js Website

April 15, 2021

firebase.png

Connect Firebase To Next.js


Loading author data...

    Legal

    Terms

    Disclaimer

    Privacy Policy


    Carlson Technologies Logo© Copyright 2021 - 2022, Carlson Technologies LLC. All Rights Reserved.