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
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
The URL is a great place to store state in React
Published: at 08:25 AMDiscover why storing state in the URL is a powerful yet often overlooked approach in React. Learn how to persist state across page reloads, share application states, and enhance user experience with practical examples and best practices.
How to Use Zod for React API Validation
Published: at 02:20 PMLearn how to use Zod for API validation in React to ensure data consistency and prevent errors. This guide covers setting up Zod, defining schemas, integrating with API calls, and handling errors effectively. Improve your React app's reliability and developer experience with Zod.
Don't use React imports like this. Use Wrapper Pattern instead
Published: at 02:16 PMLearn how to optimize React.js imports using the Wrapper Pattern to reduce bundle size and improve performance. Discover practical examples with Framer Motion and Lodash, and explore tips for choosing the right library for your project. Read more to enhance your React development workflow!
Signals in React? Not a good idea
Published: at 08:28 AMExplore why implementing signals in React might be problematic despite their popularity in other frameworks. This article examines the practical and conceptual challenges of merging fine-grained reactivity with React's coarse-grained model, and why using frameworks like Solid.js might be better for signal-based approaches.