PROWIDIT Education Academy

Blog
About us
How it works
FAQ

+994 77 333 38 36 Trial lesson Account

AZ RU EN

← Back to account

Switch courseReact course

AI for developers course104
Algorithms and data structures course129
Django & FastAPI course140
Docker & deployment course103
Full Stack Developer course270
Git & GitHub course103
HTML & CSS course154
JavaScript course169
Laravel course136
Provider Networks: MPLS, BGP and BNG81
Next.js course113
Node.js course123
PHP course144
Python course153
React course122
SQL & databases course122
TypeScript course112
Vue.js course111

Getting Started with React
What React Is and Why Use It Free
Creating a React Project with Vite
Project Structure: index.html, main.jsx and createRoot
JSX: Markup in JavaScript and Curly-Brace Expressions
JSX Rules: Single Root, Fragments and What Gets Rendered
Developer Tools: React DevTools and ESLint
Components and Props
Function Components: Creating, Nesting, Importing and Exporting
Props: Passing Data to Components
Children and Component Composition
Conditional Rendering: if, Ternary and &&
Rendering Lists and Keys
Pure Components and StrictMode
Project: Portfolio Page Built from Components
Events and State
Handling Events: onClick, onChange and the Event Object
The useState Hook: Component State
How React Updates the Screen: Trigger, Render, Commit
State as a Snapshot and Updater Functions
Updating Objects in State Immutably
Updating Arrays in State: Add, Remove, Change
Structuring State Well
Lifting State Up and a Single Source of Truth
Preserving and Resetting State: Tree Position and key
Project: Counter and Todo List
Forms
Controlled Inputs: input and textarea
Select, Checkbox and Radio in React
Submitting Forms: onSubmit, preventDefault and FormData
Uncontrolled Inputs: defaultValue and File Uploads
Manual Form Validation: Errors, Touched State and Accessible Messages
Styling Components
Adding CSS: className, Global and Inline Styles
CSS Modules: Scoped Component Styles
Conditional Classes and Component Variants with clsx
Tailwind CSS: Setup in Vite and Utility Basics
Reusable Tailwind Components: cn, Variants and Dark Mode
Project: Product Catalog with Filters and Sorting
Refs, Effects and Portals
useRef: Values That Don't Trigger Re-renders
Accessing the DOM with Refs: Focus, Scrolling and Measuring
ref as a Prop and useImperativeHandle
useEffect: Synchronizing with External Systems
Effect Dependencies: When Effects Re-run
Effect Cleanup: Timers, Subscriptions and Event Listeners
Fetching Data in useEffect: Loading, Errors and Race Conditions
You Might Not Need an Effect: Common Anti-patterns
useEffectEvent: Separating Events from Effects
Portals: Modals, Tooltips and Notifications
Project: Movie Search with a Public API
useReducer, Context and Custom Hooks
useReducer: Moving State Logic into a Reducer
Context API: Passing Data Without Prop Drilling
Context + useReducer: Scaling State Management
Context Performance and Its Limits
Custom Hooks: Extracting and Reusing Logic
Practical Hooks: useLocalStorage, useDebounce, useFetch and More
Component Patterns: Compound Components, Render Props and HOCs
Project: Quiz App with useReducer and Context
Suspense, Error Boundaries and React 19
Suspense: Fallback UI While Loading
Lazy Loading Components: lazy and Code Splitting
Class Components: An Overview for Legacy Code
Error Boundaries
useTransition: Transitions and Async Actions
Form Actions: the action Prop and useFormStatus
useActionState: Action Results and Errors
useOptimistic: Optimistic UI Updates
The use() API: Reading Promises and Context
More React 19 Features: Document Metadata, Activity and Resources
Project: Comment Feed with Actions and useOptimistic
Routing with React Router v7
React Router v7: Setup, Modes and First Routes
Navigation: Link, NavLink and useNavigate
Nested Routes, Outlet and Layout Routes
Dynamic Segments: Route Params and useParams
Query Strings: useSearchParams and State in the URL
Loading Route Data: loader and useLoaderData
Router Mutations: action, Form and useFetcher
Route Error Handling: ErrorBoundary and 404
Protected Routes and Redirects
Project: Admin Dashboard with Routing
Server Data with TanStack Query
The API Layer: A fetch Wrapper and HTTP Error Handling
TanStack Query: Server State and Your First useQuery
Query Keys and Caching: staleTime, gcTime and Refetching
Pagination and Infinite Scroll: placeholderData and useInfiniteQuery
Mutations: useMutation and Cache Invalidation
Optimistic Updates in TanStack Query
TanStack Query + React Router: Prefetching in Loaders and Suspense
Project: CRUD Notes App with TanStack Query
Global State: Zustand and Redux Toolkit
Kinds of State and Choosing the Right Tool
Zustand: A Simple Global Store
Zustand in Practice: persist, devtools and Slices
Redux Toolkit: Store, Slices, useSelector and useDispatch
Async Logic in Redux: createAsyncThunk
RTK Query: Data Fetching in the Redux Ecosystem
Project: Online Store with a Global-State Cart
TypeScript with React
TypeScript in a React Project: the react-ts Template and tsconfig
Typing Props and Children
Typing State and Events
Typing useRef, useReducer and Context
Generic Components and Typing Custom Hooks
Project: Migrating the Online Store to TypeScript
Professional Forms: React Hook Form and Zod
React Hook Form: register, handleSubmit and Errors
Zod: Validation Schemas and Data Types
React Hook Form + Zod: zodResolver and Error Messages
Controller and useFieldArray: Third-Party Inputs and Dynamic Fields
Submitting to the Server: isSubmitting, setError and Mutations
Project: Multi-Step Application Form
Performance
Why Components Re-render: Causes and Wasted Renders
Profiling: React DevTools Profiler and Performance Tracks
memo and useMemo: Skipping Renders and Caching Calculations
useCallback and When Not to Memoize
React Compiler: Automatic Memoization
useDeferredValue: Keeping the UI Responsive During Heavy Renders
Virtualizing Long Lists
Testing with Vitest and React Testing Library
Vitest: Setup and First Tests
React Testing Library: Rendering and Querying Elements
Testing Interactions: user-event and Mock Functions
Async Tests and Mocking APIs with MSW
Testing with Providers, Router and Custom Hooks
Project: Test Coverage for the Online Store
Production: Accessibility, Auth and Deployment
Accessibility (a11y): Semantics, ARIA and Focus Management
React App Architecture: Feature-Based Structure and Aliases
Environment Variables in Vite: .env Files and Build Modes
JWT Authentication: Login, Token Storage and Sessions
Refreshing Tokens: Refresh Tokens and Retrying on 401
Building and Deploying to Vercel and Netlify
Server Components Overview: A Bridge to Next.js
Final Project: A Full-Featured React App

React course · Events and State

Structuring State Well

🔒 This is the beginning of the lesson. The full lesson is available with a subscription.

Create account Log in

← Previous lesson🔒 Updating Arrays in State: Add, Remove, Change Next lesson →🔒 Lifting State Up and a Single Source of Truth

PROWIDIT Education Academy

Online programming courses in Baku. Live lessons in Azerbaijani and Russian, 80% practice, mentor support and job placement assistance.

Front End

HTML & CSS JavaScript TypeScript React Next.js Vue.js

Back End

SQL (PostgreSQL, MySQL) PHP Laravel Python Algorithms Django & FastAPI Node.js Full Stack

Tools & AI

Git & GitHub Docker & deployment AI for developers

Useful links

Free trial lesson Mentoring & interviews For companies Blog FAQ

Contacts

+994 77 333 38 36 info@prowid.com Video lessons Send a request

© 2021–2026 Prowid — IT Education Academy. All rights reserved. Baku, Azerbaijan