Tag: react
All the articles with the tag "react".
My posts
Level Up React: Mastering useReducer for structured state management
Published: at 02:10 PMComplete guide to React's useReducer hook - from basic concepts to advanced implementation. Learn how to structure complex state logic, manage interdependent state, and create maintainable React applications with practical e-commerce cart examples, TypeScript integration, and testing strategies.
Level Up React: Mastering useEffect for performant React applications
Published: at 04:00 PMLearn how to master React's useEffect hook with practical examples. Discover internal mechanisms, avoid common pitfalls, and build performant applications with proper synchronization techniques.
Level Up React: Deep dive into state and useState
Published: at 05:00 PMComplete guide to React's useState hook - from basics to advanced techniques. Learn state management, avoid common pitfalls, and optimize performance with practical examples for React developers.
Level Up React: Functional programming in React
Published: at 04:00 PMLearn how functional programming principles power React development. This practical guide explores first-class functions, pure functions, immutability, currying and composition with clear examples. Discover how these concepts lead to more predictable, testable and maintainable React applications.
Level up React: React and React DOM architecture
Published: at 02:45 PMDiscover why React is split into two packages. Learn how react and react-dom work together, their specific roles, and the benefits of this architecture. A clear explanation with practical examples.
Level Up React : Deep Dive into React Elements
Published: at 11:30 AMLearn how React Elements work under the hood. Understand their structure, creation process, and the reconciliation mechanism. A comprehensive guide for React developers
Level Up React : Declarative vs Imperative Programming
Published: at 10:00 AMDiscover how declarative programming transforms React development. Learn the key differences between imperative and declarative approaches through practical examples and understand why React embraces declarative programming for state, effects, lists, and conditional rendering.
Migration from Jest to Vitest: Complete feedback on a React/TypeScript project
Published: at 04:00 PMComplete step-by-step guide to migrate from Jest to Vitest in a React/TypeScript project. Includes ESM handling, performance optimization, and real-world solutions from a 2900+ tests migration.
Responsive Images: a quick example with react
Published: at 03:00 PMOptimizing web performance is a priority for any developer. One key aspect to consider is how images are handled across different devices. In this article, we will explore how to create responsive images with React. The goal is to display different images based on the screen size.
Example of Using useSyncExternalStore with LocalStorage
Published: at 06:26 PMLearn how to efficiently synchronize application state with external data sources like LocalStorage using React's useSyncExternalStore hook, with a practical example and detailed explanation.
Tech Watch Posts
Faster Lazy Loading in React Router v7.5+
Published: at 01:58 PMReact Router v7.5 now supports a faster, more granular approach to lazy loading route code in Data Mode
Simplify TanStack React Query State Handling with Pattern Matching
Published: at 01:50 PMHow pattern matching can help elegantly handle different states (loading, error, success, empty) of TanStack React Query, making your components cleaner and more type-safe.
Open-Closed Principle (OCP) In React: Write Extensible Components
Published: at 01:40 PMA practical look at applying the Open-Closed Principle to React.
Memoizing components in React: a case for useMemo
Published: at 02:24 PMReact.memo is often used to optimize component rendering, but useMemo offers more control and transparency. This article explains why useMemo could be a solution too to memoize components in React applications until the React Compiler take care of it for us.
React Reconciliation: The Hidden Engine Behind Your Components
Published: at 02:49 PMA deep dive into how React's reconciliation algorithm works and why it matters for performance
React.memo Demystified: When It Helps and When It Hurts
Published: at 02:37 PMA deep dive into React's memoization tools and the hidden pitfalls that make them harder to use than you think
Event-Driven Architecture for Clean React Component Communication
Published: at 01:34 PMDiscover how event-driven architecture simplifies React component communication and eliminates prop drilling. Learn to implement a custom useEvent hook for cleaner, more maintainable code with real-world examples.
Experimenting with React View Transitions
Published: at 01:09 PMA first look at React's new and experimental View Transitions API
SSR Deep Dive for React Developers
Published: at 02:40 PMExplore step-by-step how Server-Side Rendering (SSR), pre-rendering, hydration, and Static Site Generation (SSG) work in React, their costs, performance impact, benefits, and trade-offs.
Beyond React.memo: Smarter Ways to Optimize Performance
Published: at 08:46 AMWhy composition patterns might be better than memoization for React performance