Best of React — February 2025
- 1
- 2
Web Tools Weekly·1y
Web Tools #604 -
Web Tools Weekly issue #604 highlights tools and libraries including STRICH for barcode scanning in web apps, a variety of React tools such as hookcn and ReactAI, build tools like eslint-plugin-format and Go Blueprint, and media tools including p5.plotSvg and Animated Favicon Generator. The issue also features several commercial apps like Webdone and Meco aimed at improving productivity and development efficiency.
- 3
freeCodeCamp·1y
How to Build an Analytical Dashboard with Next.js
The post provides a comprehensive guide to building an analytical dashboard using Next.js, Flexmonster, and Highcharts. It includes step-by-step instructions on configuring these tools, creating charts, and setting up a functional user interface. Additionally, it explores real-world survey data on passenger flying etiquette to demonstrate the dashboard's capabilities.
- 4
developedbyed·1y
The Power of SVG Animations
Learn how to enhance your SVG animation skills by creating a dynamic sun-to-moon toggle with glowing effects using a single SVG. The guide covers integrating this effect from scratch using React and Figma, optimizing SVG path attributes, and adding staggered animations with motion.react. The tutorial provides step-by-step instructions and code snippets to make the task approachable and fun.
- 5
How to Use Zod for React API Validation
Zod is a TypeScript-first library that simplifies data validation in React applications by defining schemas to validate incoming API data. This tutorial guides you through setting up Zod, creating and using schemas, and integrating Zod with React for robust API response handling. It demonstrates how to ensure data consistency and early error detection, leading to a smoother and more efficient development experience.
- 6
How to Build a Reusable useSearch Hook in React
Learn how to build a reusable useSearch hook in React that improves performance with techniques like debouncing and memoization, supports fuzzy search for handling typos, and implements pagination for managing large datasets. This step-by-step guide is ideal for React developers looking to enhance their search features and optimize user experience.
- 7
Tiger's Place·1y
Making Next.js Apps Faster: A Practical Performance Guide Beyond Next.js
This post provides a comprehensive guide on optimizing the performance of Next.js applications. It covers the fundamentals of web performance, such as understanding client and server bundles, JavaScript execution in the browser, and techniques for identifying performance issues using tools like PageSpeed Insights and Chrome DevTools. The post offers practical strategies to make your app faster, including the use of server components, code splitting, dynamic imports, handling large dependencies, and prefetching/preloading techniques. The aim is to equip developers with the knowledge to significantly improve both perceived and actual performance of their Next.js apps.
- 8
- 9
Community Picks·1y
Building a Telegram Clone with Next.js and TailwindCSS - Part One
This guide details how to build a Telegram Web clone using Next.js, TailwindCSS, and Stream SDKs. It covers setting up the project, implementing user authentication with Clerk, and creating the app's initial layout. The series will continue to add real-time messaging and video/audio call features in later parts.
- 10
- 11
LogRocket·1y
React useCallback: When and how to use it for better performance
The useCallback hook in React helps optimize performance by memoizing functions and preventing their recreation on each render. This is particularly useful in avoiding unnecessary re-renders of memoized child components. The article demonstrates its application with examples, such as optimizing event handlers in an e-commerce app. It also compares useCallback with other related hooks like useMemo, useEffect, and useRef to highlight different use cases. Proper usage of useCallback can significantly enhance the efficiency of React applications.
- 12
Codrops·1y
Nim is a free and open-source personal website template built with Next.js 15, React 19 and Motion-Primitives.
Nim is a free, open-source personal website template built with Next.js 15, React 19, Tailwind CSS v4, and Motion-Primitives. It offers customizable, pre-built motion components to simplify adding animations to websites. Designed for developers, designers, and founders, Nim is easy to customize, featuring a blog powered by MDX and various animated elements.
- 13
Server and Client Component Patterns in Next.js
Learn when to use server and client components in Next.js. Understand the benefits of each type, like data fetching and access to backend resources for server components, and adding interactivity and using browser APIs for client components. Discover patterns, such as sharing data between components, preventing server code in client bundles, using third-party components, and employing context providers. Also, get insights on optimizing component placement for reducing JavaScript load on the browser.
- 14
I like the future of Next.js
Next.js is introducing new features such as a granular cache system and `use cache` that can be implemented at various levels including file, component, and function-level caching. The system supports smart caching with cache tags, custom cache profiles, and cache keys for better development experience. These enhancements are part of an effort to improve caching mechanisms, enabling easier invalidation and better performance.
- 15
Syncfusion·1y
Top 5 Free JavaScript PDF Viewers for Developers in 2025
Discover the top five free JavaScript PDF Viewers for developers, including Syncfusion JavaScript PDF Viewer, PDF.js, Pdfvuer, ngx-extended-pdf-viewer, and React-pdf. Learn about their key features, usability, customization options, and licensing details to find the best fit for your project's needs. Each tool offers unique strengths for different frameworks like Angular, React, and Vue.
- 16
React 19's cache() Function
React 19 introduces the cache() function to enhance performance in React Server Components by caching function results and sharing data to prevent unnecessary duplicate work. This function is designed to be used server-side, with memoized functions defined outside components. Key rules include ensuring same reference for objects and resetting the cache with each server request. Common mistakes involve improper placement of memoized functions and mismanagement of cache keys.
- 17
10 Must Know Tips From a Senior React Developer
A senior React developer shares 10 essential tips for becoming a better React developer. These tips emphasize the importance of understanding JavaScript before diving into React, mastering the art of reading documentation, following React rules and single responsibility principle, and being mindful about the reusability of components. The developer also suggests using a feature-based folder structure, working on diverse projects, reading open source code, and consuming high-quality content.
- 18
Advanced React state management using URL parameters
Modern web apps benefit from smooth and responsive user interactions, such as tab switching and data filtering. This tutorial delves into managing state changes in React using URL parameters to ensure states persist across user sessions, enhancing user experience. It covers setting up a React app with URL-based state management, using libraries such as React Router DOM and TanStack Query, and implementing features like pagination and filtering. The guide also discusses SEO, performance, and accessibility considerations for URL-based states.
- 19
Ultimate Next 15 Course: Build a YouTube Clone (2025)
Antonio's comprehensive course details creating a YouTube clone using modern web technologies, including Next.js 15, React 19, TRPC, Postgres, and AI tools. The app features essential video player interactions, user engagement through likes, comments, playlists, and creator tools for video processing, thumbnail management, and AI-generated titles/descriptions. The tutorial spans 38 chapters and over 24 hours, covering advanced topics such as server-side data prefetching and database management. Antonio introduces a whiteboard summary approach for clarity on chapter goals.
- 20
Directus·1y
Solving the Multiple-Frontend Problem in Modern Applications
Modern applications often require multiple frontend architectures to support various platforms like web, mobile, and IoT. This post discusses practical approaches to manage multiple frontends without resorting to rewriting the entire codebase or learning new frameworks. Key strategies include adopting an API-first approach and using Module Federation to share code efficiently. It also covers the importance of finding natural boundaries based on business logic, handling the performance paradox, ensuring security, and managing integration points effectively.
- 21
Josh W Comeau·1y
A Million Little Secrets • Josh W. Comeau
Josh W. Comeau shares insights into the intricate details and development process behind the landing page for his upcoming interactive online course 'Whimsical Animations'. The post covers animation techniques using web technologies like CSS, JavaScript, and SVGs, and discusses the use of sprites for performance optimization, the application of polar coordinates for particle effects, and adding sound effects for an enhanced user experience.
- 22
How to Code a Crossy Road Game Clone with React Three Fiber
Learn how to create a clone of the mobile game Crossy Road using React Three Fiber. This tutorial covers setting up the scene, drawing characters and maps, animating vehicles, and implementing player movement and hit detection. The tutorial also provides guidance on using Vite to initialize the project and incorporating essential components for the game.
- 23
DEV·1y
Managing Application State with Custom Events in React: A Simple Yet Powerful Approach
Managing state in React applications can be simplified using the native Browser Event API through Custom Events. This approach avoids prop drilling and complex libraries like Context API or Redux. Custom Events provide decoupled communication, type safety, and are lightweight. The post includes practical examples and best practices for integrating custom events, emphasizing their use in scenarios requiring isolated component interactions without direct relationships.
- 24
As a Programmer·1y
PERN Stack Course: Build a Product Store with Postgres & React
Learn how to build a full-stack product store with the PERN stack (Postgres, Express, React, and Node). The tutorial walks you through creating an API, connecting to a PostgreSQL database, writing SQL code, and building a responsive UI. Advanced concepts such as rate limiting, bot detection, and file structuring are also covered. The project concludes with deployment instructions.
- 25
Fullstack Developer·1y
Multi-Image Uploader for Next.js | Shadcn/ui | Zod
Discover a compact, responsive file uploader for Next.js, built with shadcn/ui. It supports any file type, custom file limits, live previews, animations for deletions, is type-safe with Zod and React Hook Form, and is cloud-ready for S3/R2 via signed URLs. It's perfect for all screen sizes.
