Mastering React Hooks as a beginner - useState()

useState – Managing State in React You’ve probably heard the term "state" thrown around a lot when learning React. But what does it mean? Think of state like the mood of your app — it’s what gives your app its personality! State controls things like whether a button is pressed, what text is typed in an input box, or how much a counter is incremented. Syntax const [state, setState] = useState(initialValue); Toggle Between Light and Dark Mode You’ve probably seen websites with a button that lets you switch between light and dark themes, right? Well, let’s build that using useState in a React functional component. We’ll create a button that toggles between two themes — light and dark. import React, { useState } from 'react'; import './App.css'; // This is where we define the styles for light and dark modes function ThemeSwitcher() { const [isDarkMode, setIsDarkMode] = useState(false); // Start in light mode (false) // Function to toggle between light and dark modes const toggleTheme = () => { setIsDarkMode(!isDarkMode); // Toggle the state }; return ( {isDarkMode ? 'Dark Mode' : 'Light Mode'} Switch to {isDarkMode ? 'Light Mode' : 'Dark Mode'} ); } export default ThemeSwitcher; Tips for better optimization Use Previous State for Updates If the new state depends on the old state, always pass a function to setState setCount(prevCount => prevCount + 1); Lazy Initialization For expensive initial states, use a function to initialize state. const [count, setCount] = useState(() => calculateInitialState()); Alright, that’s pretty much it for useState. Nothing too crazy, right? You’ve seen how to use it, toggle some themes, and even picked up a few tips for writing cleaner code. Catch you in the next one! ✌️

Apr 8, 2025 - 08:38

Mastering React Hooks as a beginner - useState()

`useState` – Managing State in React

You’ve probably heard the term "state" thrown around a lot when learning React. But what does it mean? Think of state like the mood of your app — it’s what gives your app its personality! State controls things like whether a button is pressed, what text is typed in an input box, or how much a counter is incremented.

Syntax

const [state, setState] = useState(initialValue);

Toggle Between Light and Dark Mode

You’ve probably seen websites with a button that lets you switch between light and dark themes, right? Well, let’s build that using useState in a React functional component. We’ll create a button that toggles between two themes — light and dark.

import React, { useState } from 'react';
import './App.css'; // This is where we define the styles for light and dark modes

function ThemeSwitcher() {
  const [isDarkMode, setIsDarkMode] = useState(false); // Start in light mode (false)

  // Function to toggle between light and dark modes
  const toggleTheme = () => {
    setIsDarkMode(!isDarkMode);  // Toggle the state
  };

  return (
    
      {isDarkMode ? 'Dark Mode' : 'Light Mode'}
      
    
  );
}

export default ThemeSwitcher;

Tips for better optimization

Use Previous State for Updates

If the new state depends on the old state, always pass a function to setState

setCount(prevCount => prevCount + 1);

Lazy Initialization

For expensive initial states, use a function to initialize state.

const [count, setCount] = useState(() => calculateInitialState());

Alright, that’s pretty much it for useState. Nothing too crazy, right? You’ve seen how to use it, toggle some themes, and even picked up a few tips for writing cleaner code.
Catch you in the next one! ✌️