DEV Community

Henri de la Hoz
Henri de la Hoz

Posted on


Fundamentals of useState

This hook enables the functionality of managing the state in function components.

import React, { useState } from 'react'

const Header = () => {
    //setting initial state up and getting state variable
    // and function that is going to manage it
    const [darkModeActive, setDarkModeActive] = useState(false)
    // This inner function makes use of the setDarkModeActive to set the new state.
    const handleClick = () => {
    return (
        <div className="Header">
            <h1>Crypto Swag</h1>
                    handleClick}>{darkModeActive ? 
                    'Light Mode' 
                    : 'Dark Mode'}

export default Header
Enter fullscreen mode Exit fullscreen mode

In the above example, Header is a component and we are using useState to control the darkMode of a website.

useState hook receives the initial state we want to control and then it returns an array with 2 elements. First element is the variable containing the current state and a second element is the function on charge of changing the state itself.

Top comments (0)

Timeless DEV post...

Git Concepts I Wish I Knew Years Ago

The most used technology by developers is not Javascript.

It's not Python or HTML.

It hardly even gets mentioned in interviews or listed as a pre-requisite for jobs.

I'm talking about Git and version control of course.

One does not simply learn git