Learn it from developers who built it.
Tutorials, how-tos and deep dives on AI, .NET, C#, cloud and developer tools, written by the community.
React Hooks like useEffect, useReducer, and useMemo simplify functional components by managing state, handling side effects, and optimizing performance. They enable cleaner, faster, and more maintainable React applications.
Everything on React, not only its articles: the React page →
React Hooks let developers use state, lifecycle methods, and other React features in functional components. Hooks like useState, useEffect, and custom hooks make code cleaner, reusable, and easier to manage.
React is a JavaScript library for building fast, interactive UIs using reusable components, a virtual DOM, and declarative syntax, enabling efficient cross-platform development for web and mobile applications.
Master React with this comprehensive cheatsheet covering JSX, components, hooks, state, props, routing, context, and advanced concepts—perfect for beginners and developers seeking a quick, practical reference for building modern web applications.
Functional and class components are core to React. Learn their differences, syntax, state handling, lifecycle methods, and why modern development often prefers functional components with Hooks for cleaner code.
Mastering React: From Basics to Advanced Concepts . Detailed explanation of each foundational topics.
This article explores the difference between controlled and uncontrolled components in React forms, explaining their definitions, how they work, advantages, disadvantages, and when to use each, with clear examples and SEO-friendly explanations.
React components are the building blocks of UI in React. They can be functional or class-based, use props and state for data, and support hooks like useState and useEffect for dynamic, reusable, and interactive interfaces.
This article explains what keys are in React, why they are required when rendering lists, and how they improve the performance and correctness of UI rendering. We’ll also discuss best practices for choosing keys, with examples.
Props are read-only data passed from parent to child components, while state is mutable data managed within a component. Together, they control UI rendering and ensure smooth data flow in React apps.
JSX lets you write HTML-like syntax directly in JavaScript, making UI creation easier. It combines JavaScript logic with markup, enabling dynamic, readable, and maintainable React components.
I've been checking out some of the latest templates for React and Next.js, and I wanted to share a few that I'm really impressed with. Whether you're building a dashboard or a sleek website, these templates are fantastic starting points.
Learn how to build your first custom React Hook with this beginner-friendly guide. Understand the power of reusable logic with real-world examples. Say goodbye to repeating useEffect and useState code across components.
Learn how to set up and integrate JSON Server with a React project to create a mock REST API for prototyping, testing, and building frontend features without needing a full backend.
Build a responsive weather app using Next.js, Tailwind CSS, and the OpenWeather API. Learn how to fetch weather data, handle search input, and style clean UI components. This project is ideal for React developers seeking a practical, full-stack example.
Is your React app feeling sluggish, laggy, or just not as snappy as it should be? In this post, we break down five quick, proven fixes to improve performance, no rewrites required. Learn how to stop unnecessary re-renders, optimize state, and keep your UI fast and responsive.
Learn React with this beginner-friendly guide covering components, JSX, props, state, hooks, and more to build modern, fast web applications.
If you’re starting in 2025 and want to build full-stack apps without drowning in config files or DevOps nightmares, Next.js is the best place to start.
This article explores how React rendering has evolved over the years from Client Side Rendering (CSR) to Server Side Rendering (SSR), and now to React Server Components (RSC). Each stage reflects changes in how we think about performance, user experience, and developer workflows.
Learn how props in React enable parent-to-child data flow, their role in one-way binding, examples of props drilling, its drawbacks, and solutions like Context API and state management tools.
Managing state in large React applications can be complex. Redux offers a robust and predictable solution for global state management. This guide walks you through how Redux works, why you should use it, and how to integrate it step by step using Redux Toolkit.
Implement secure login and role-based access in Next.js 14 using NextAuth.js, JWT, and MongoDB. Learn to build protected routes, manage sessions, and enforce user roles with client/server-side checks and middleware.
Learn how to build a DeselectableRadioGroup in React using Material UI. This custom component lets users select, deselect, or reset radio options, providing more flexibility than standard radio buttons.
React Server Components (RSC) let you render parts of your UI entirely on the server, sending only HTML to the browser. This reduces JavaScript bundle size, speeds up page loads, and improves performance. They're ideal for content-heavy or data-driven apps where full interactivity isn't needed everywhere.
Learn how to use React Context like a pro! Avoid common pitfalls, improve performance with memoization, split providers, and combine them with custom hooks and reducers for scalable and maintainable state management.
Build a simple React app to display and add users using components and hooks. Learn how to set up with Create React App, manage state with useState, and style with basic CSS for a clean UI experience.
Build custom quizzes on any topic using Google's Gemini AI with this modern React app. Features include difficulty settings, real-time feedback, explanations, and smooth deployment via GitHub Pages.
Learn how React optimizes performance through batching, reconciliation, and memoization using React.memo, useMemo, and useCallback key tools to reduce re-renders and build fast, efficient apps.
Learn how to use Next.js App Router—a modern routing system using the `/app` directory. It supports layouts, nested routes, loading states, dynamic paths, and more for scalable, organized applications.
Learn how to reuse and share logic between React components using custom hooks. Create clean, maintainable code with real examples of custom React hooks.
Write an article and earn +1,000 SHARP when it is approved.
Write an article
