DEV·2yonClick={someFunction} VS onClick={()=>someFunction}
Using `onClick={someFunction}` directly references the function and executes it on click without creating an extra function, making it more efficient for simple handlers. In contrast, `onClick={() => someFunction()}` creates a new function on each render, ideal for scenarios where arguments need to be passed or additional operations are required before executing the function.
Community Picks·2yHow to reduce unused JavaScript in your code?
Reducing unused JavaScript is crucial for optimizing modern websites. This guide covers techniques like code splitting, tree shaking, minifying JavaScript, loading scripts asynchronously, dynamic imports, and lazy loading to help improve web performance by cutting down on unnecessary code.
freeCodeCamp·2yWhat's New in React 19
React 19 introduces numerous features and enhancements, including improved data mutation handling, optimistic updates, and new APIs like `use()`. The update also offers innovative tools such as a new open-source compiler for performance optimization. Developers can learn about these enhancements via a comprehensive course provided by Bob Ziroll from Scrimba and freeCodeCamp.org on YouTube.
Community Picks·2yZustand in Next.js 14 (with ts)
Learn how to use Zustand, a simple and scalable state management solution, in a Next.js project with TypeScript. The post guides you through setting up a new project, integrating Zustand, and creating a state store. It also covers adding actions to manage the state and persisting state data using localStorage.
Community Picks·2yBuild a real-time voting app with WebSockets, React & TypeScript 🔌⚡️
Learn how to build a real-time voting app using WebSockets in a React-NodeJS environment. Discover two methods: one using ExpressJS and Socket.IO for a customizable approach and the other using the Wasp full-stack framework for easier integration. Explore the differences between these methods, including setup complexity, control, and type safety. This guide highlights the limitations of serverless solutions for WebSockets and provides step-by-step instructions to implement and configure real-time communication features.
Community Picks·2yUnderstanding React Compiler
React's core architecture of calling functions repeatedly can lead to performance issues, especially with expensive functions. The React Compiler automates performance tuning by rewriting code to include memoization and caching. Transpilers, compilers, and optimizers are tools that analyze and transform code into a functionally equivalent form. The Fiber tree in React manages state and dependencies, with the React Compiler enhancing performance by automatically caching results. While this saves processing power, it increases memory usage and can complicate debugging due to additional abstraction layers.
Community Picks·2yAuthentication in React with JWTs, Access & Refresh Tokens (Complete Tutorial)
This post explains the importance of authentication in a React application and how to handle it using JWTs, access tokens, and refresh tokens. It emphasizes the need for proper authentication to ensure security and prevent data breaches. The post also provides a code example that shows how to implement authentication in a React codebase.
Awesome Go·2yAnnouncing River UI
River UI provides a user-friendly interface for managing SQL-backed job queues, featuring a backend Go API and a frontend built with React and TypeScript. It allows users to monitor job states, interact by cancelling, retrying, or deleting jobs, and offers features like pausing queues during issues. River UI is available as a Docker image and a pre-built static binary, with future enhancements planned.
freeCodeCamp·2yMastering Shadcn UI Components
A comprehensive course on freeCodeCamp.org's YouTube channel teaches how to master Shadcn, a toolset providing highly customizable and accessible React components. It covers the main UI components, their integration with React or Next.js projects, and the ability to customize them via CSS variables or Tailwind CSS for consistent theming. This course is beneficial for both beginners and experienced developers looking to speed up their development process and maintain control over component styling and behavior.
Community Picks·2yHow I Use Adapter Pattern in React
The post discusses the use of the Adapter pattern in React development to handle mismatched data structures between the backend API response and React components. It explains how the Adapter pattern can be applied in React and provides an example of using the pattern with `react-query`. The post emphasizes the flexibility and organization provided by the Adapter pattern and encourages readers to explore different implementations and design patterns.
Community Picks·2yThe best free, open-source SaaS template for React & NodeJS
Open SaaS is a free, open-source SaaS template for React, NodeJS, and Prisma. It offers features such as authentication, admin dashboard, analytics integration, stripe payments, typesafety, AI-powered example app, and easy deployment.
Tiger's Place·2yOptimizing React Context and Re-renders
Learn how to optimize React Context to minimize re-renders. The post covers evaluating the causes of re-renders, splitting context into multiple contexts, using the useMemo hook for memoizing context values, and leveraging React.memo for state from higher components. Practical code examples are provided to demonstrate these optimization techniques.
Community Picks·2yBuilding a Netflix show recommender using Crawlee and React
Learn how to build a Netflix show recommender using Crawlee and React, guided through scraping Netflix content with Crawlee and visualizing it with a React app built with Vite. The guide covers prerequisites, installation steps, writing scraping code using Cheerio, and integrating the scraped data into a React application.
Theo - t3․gg·2yI can’t believe they built this in React
The post explores the creation of an interactive 3D badge for the Vercel Ship 2024 event using React 3 Fiber, an advanced tool for rendering 3D elements in React. It breaks down the tech stack, including Blender for model preparation, React, React 3 Fiber, and React 3 Rapier for physics. The guide covers setting up a 3D environment, integrating physics, and handling user interactions, offering readers a comprehensive look into developing interactive 3D components on the web.
Community Picks·2yHow to build: a To-Do list app with an embedded AI copilot (Next.js, GPT4, & CopilotKit)
Learn how to build a To-Do list app with an embedded AI copilot using Next.js and CopilotKit. Prerequisites include a basic understanding of React or Next.js. Integrate AI functionalities using CopilotKit and generate to-do lists with the in-app chatbot.
Laravel News·2ySQLite Studio is a SQLite Database Explorer
SQLite Studio is a lightweight, single-command database explorer for SQLite databases, which also supports connections to local SQLite databases, remote libSQL Servers, and PostgreSQL Servers. It features an intuitive interface with an overview of metadata, infinite scroll for rows view, and a custom query page. The backend is built with Rust while the frontend leverages TypeScript, React, Tailwind CSS, and Vite. SQLite Studio is open-source and available on GitHub.
