Community Picks·3yWhy Signals Are Better Than React Hooks
Discover the benefits of using signals over React hooks, including simplified usage, improved performance, and eliminating complex rules. Signals handle dependencies automatically and can be used anywhere in or outside of a component. Performance metrics have shown significant speed improvements with the use of signals.
ITNEXT·3yBuild a Full Stack ReminderApp with React, NextJs, Typescript, ServerAction, Zod, Hook-form, Prisma, and Tailwind
Build a Full Stack ReminderApp with React, NextJs, Typescript, ServerAction, Zod, Hook-form, Prisma, and Tailwind. Hi everyone, I published my last video: Build a full stack Reminder App.
habr·3yReact Custom Hook: useArray
"useArray" hook is one of the many carefully crafted hooks available in the collection of React custom hooks. The useArray hook uses the useState hook from React to manage the array state. The advantages of using this custom hook are twofold: it simplifies the management of array states and provides a cleaner and more readable code structure.
asayer·3yApplying Design Principles in React
KISS Principle KISS is an acronym for ‘keep it simple, stupid’ This principle was first coined by Clarence Leonard ‘Kelly’ Johnson (1910-1990), an American aeronautical and systems engineer. This article will explain several popular software development principles and how to implement them in your React code base.
Community Picks·2yThe new wave of React state management
React applications face challenges in managing shared global state, leading to the development of various state management libraries. These libraries need to address problems such as reading and updating stored state, optimizing runtime performance, and managing memory usage. Different libraries take different approaches to solve these problems. Understanding these problems and the available solutions can help choose the right state management library for specific application needs.
freeCodeCamp·3yHow to Add Real-time Post Notifications to Your React Applications
How to add Real-time Post Notifications to your React app, that updates the user when someone likes or comments on your thread? You must know React and Firebase in order to proceed with the things explained below. If you want to build a social media application, simply refer to the videos below.
freeCodeCamp·3yTypeScript Handbook for React Developers – How to Build a Type-Safe Todo App
TypeScript Handbook for React Developers is just for you. You will learn how to handle state and props with strong typing, how to create React components with TypeScript. By the end of this tutorial, you'll have a solid understanding of TypeScript and be ready to develop type-safe React applications with confidence.
habr·3ySupercharge Your Projects with React Custom Hooks
React Hooks are a feature introduced in React version 16.8 that revolutionized the way developers write and manage stateful logic in functional components. They enable developers to break down complex components into smaller, more manageable pieces, resulting in cleaner and more maintainable code. Hooks allow developers to manage component state and handle side effects effortlessly.
habr·3yReact Custom Hook: useAsync
The useAsync hook takes in a callback function that performs the asynchronous operation and an optional array of dependencies. It returns an object with three properties: loading, error, and value. The hook employs the useState and useEffect hooks to manage the loading state and invoke the memoized callback function when necessary.
habr·3yReact Custom Hook: useOnScreen
The useOnScreen hook leverages the power of the Intersection Observer API. It can be immensely useful in scenarios where you want to trigger animations, lazy load images, or load additional content as the user scrolls. UseOnScreen will notify you when it enters or exits the viewport.
Syncfusion·3yBoosting React Performance: useCallback vs. useMemo Hooks
React 16 promoted the creation of functional components and introduced the following hooks: useEffect for handling the component’s lifecycle. These hooks are necessary because re-renders and re-computations are costly operations. In this blog, we will delve into these hooks, exploring their functionality and examining how they work.
habr·3yReact Custom Hook: useDarkMode
"UseDarkMode" Hook is one of the many carefully crafted hooks available in the collection of React custom hooks. It combines two other handy hooks and, to provide a seamless dark mode experience. It automatically detects the user's preferred color scheme and persists the dark mode state in the browser's local storage.
habr·3yReact Custom Hook: usePrevious
"usePrevious" hook is one of the many carefully crafted hooks available in the collection of React custom hooks. The advantages of using usePrevious are remarkable. By using useRef, this hook efficiently stores the current and previous values, updating them whenever the value changes.
habr·3yReact Custom Hook: useStorage
Discover the potential of React custom hooks with a focus on the 'useStorage' hook. It provides convenient functions for storing and retrieving data in the browser's local or session storage. The hook handles serialization, deserialization, and automatic synchronization with the component's state. The remove function allows for easy deletion of stored values. Use the hook in various scenarios, such as persisting user preferences in a settings panel.
freeCodeCamp·3yHow to Use React Components – Props, Default Props, and PropTypes Explained
React is an open-source JavaScript library used for building user interfaces (UIs) in web applications. In this tutorial, we'll explore what React components are, how to pass and render data to them using props, and how to enhance their reliability using props and propTypes.
habr·3yReact Custom Hook: useClickOutside
The useClickOutside hook is designed to simplify the process of detecting clicks outside a specified component. It listens for click events on the document level, allowing you to trigger a callback function when a click occurs outside the provided component's reference. It works seamlessly with functional components using the useState and useRef hooks.
Amplication·3yWhat's New in Node20 for API Development
The release of Node.js 20 marked another step in the platform's evolution, introducing a range of features that cater to the needs of modern software development. The advancements in the Web Assembly System Interface (WASI) are noteworthy. The integration of the V8 11.3 JavaScript engine brings several technical improvements.
