• 🚀 React Introduction
  • 🔏 React Structure
  • 🔏 React Components
  • 🔏 React props
  • 🔏 React Styling & UI
  • 🚀 React Router
  • 🔏 React Events
  • 🚀 React useState
  • 🔏 React useEffect
  • 🔏 React API Integration
  • 🔏 React useContext
  • 🔏 React useRef
  • 🔏 React Storage
  • 🔏 React useMemo
  • 🔏 React useReducer
  • 🔓 React Redux
  • 🔏 React Authentication
  • 🔏 React Testing
  • 🔏 React Build & Deploy

React With useState Hook

Allows you to add state to your functional components. The useState Hook returns an array with two elements: the current state value and a function to update the state.

How To Define State

import { useState } from 'react'

const [ data , setData ] = useState ( init )

Setup useSate Hook

  1. < StrictMode >
  2. < BrowserRouter >
  3. < App />
  4. < /BrowserRouter >
  5. < /StrictMode >

Implement useSate Hook

  1. < Routes >
  2. < Route path="/" element={< Home />} />
  3. < Route path="/page" element={< Page />} />
  4. < Route path="/profile" element={< Profile />} />
  5. < Route path="*" element={< h1 >Page 404< /h1 >} />
  6. < Routes >

When to Use React.js

  • You want maximum flexibility and control over your project.
  • You are building a highly interactive single-page application (SPA).
  • You are comfortable setting up your own routing, state management, and other tools.