NUS Hackers Wiki
NUS Hackers Wiki
  • NUS Hackers Wiki
  • Hackerschool
    • Virtual Machines and Linux
    • Beginners' Guide to the Terminal
      • Introduction to the Terminal
      • Modern Shell Tools
      • Shell Scripting
      • Real World Scripting
      • Resources
    • Self-Hosting: Three Easy Pieces
      • 1. Setting up your server
      • 2. Running Services
      • 3. Monitoring your server
    • Vim
    • Introduction to Zig
      • Language Basics
      • Error Handling
      • Memory Management
      • Working with C
      • Exploring comptime
    • CI/CD with Github Actions
      • Background
      • Basics of Github Actions
        • Target workflow
        • Running unit tests
        • Linting code
        • Deploying to Github Pages
      • Advanced use cases
        • Pollers
        • Github script
        • Executing third-party scripts
        • Reusable workflows
      • Cookbook
    • Lightning Git
      • Git Concepts
      • Getting Started with Git
      • Making your first commit
      • Branching
      • Merge Conflicts
      • Integrating remote repositories
      • Collaborative Workflows
      • Commit Manipulation and Reflog
      • Interactive rebasing
      • filter-repo
  • Orbital
    • JavaScript
      • Browser Developer Tools
      • Getting Started
      • Datatypes
      • Operators and Operations
      • Loops and Conditions
      • Functions
      • Strings
      • Arrays
      • HTML
        • Getting Started
        • Tag Attributes
        • HTML Forms
        • Browser Inspector
      • CSS
        • Selectors
        • Colors in CSS
        • Measurements in CSS
        • The Box Model
        • Adding Styles - Part 1
        • Adding Styles - Part 2
      • Working with the DOM
        • Querying the DOM - Selectors
        • Querying the DOM - Element Attributes
        • Querying the DOM - Element Styles
        • Events with JS and HTML
        • Exercise: Click Counter
        • Editing the DOM
        • Fetch Requests
        • Exercise: The NUSMods API
    • React
      • Setup
      • State
    • React Native
      • Setup
      • Intro to JSX
      • Basic Syntax
      • Handling UI
      • Props
      • State Management
    • Git
      • Setup
      • Command Glossary
      • Fundamental Concepts
        • Getting Started
        • Integrating Remote Repositories
        • Branching
        • Merge Conflicts
      • Collaborative Workflows
        • Fork and PR Workflow
        • Branch and PR Workflow
      • Advanced Concepts
        • Ignoring Files
        • Commit Message Conventions
        • Github Collaborators
        • CI/CD with Github Actions
        • Advanced Git Commands
      • FAQ
    • Telegram Bot
      • Creating a TeleBot
      • API Calls
      • Telebot Basics
      • Integrating API's
    • Relational Database
      • Database Overview
      • Database Design
      • Entity Relationship Diagram
      • SQL Basics & PostgreSQL
    • TypeScript
      • Types and Interfaces
      • Utility Types
      • Typing Component Props, Events, and Hooks
      • Why You Should Avoid Using any (and What to Do Instead)
      • TypeScript Tricks You’ll Use All the Time in React
Powered by GitBook
On this page
  • What is State?
  • The useState Hook
  • React's Rendering Process
  • Implementing State Variables
  • Additional resources:
Edit on GitHub
Export as PDF
  1. Orbital
  2. React

State

What is State?

State serves as a component's memory, allowing it to store and track information between renders.

The useState Hook

The useState hook enables state management in functional components. It accepts an initial value and returns an array containing:

  1. The current state value

  2. A function to update that value

const [currentValue, setValue] = useState(initialVal);

// example:
const [color, setColor] = useState(defaultColor);

Note: useState(initialVal) returns an array, ["val", "func"] destructures the array to access the elements and assign it to a specific name.

React's Rendering Process

When a component's state or props change, React performs a rerender by:

  1. Destroying the current component instance (including all variables and functions)

  2. Recreating it with the updated state values

During this process, React maintains state consistency by providing the latest values to the recreated component. The initial value is only used on the first render.

Implementing State Variables

To add state:

  1. Import useState:

import { useState } from "React";
  1. Replace regular variables with state:

// Before
let counter = 0;

// After
const [counter, setCounter] = useState(0);
  1. Update state using a setter function:

function increment() {
    setCounter(counter + 1);
}

// or you can declare an arrow/anonymous function, which is more modern
const increment = () => setCounter(counter + 1);

Additional resources:

PreviousSetupNextReact Native

Last updated 11 days ago

Managing State – Reactreactjs
W3Schools.com
Logo
Logo