Sreerag Pavithranblog.iamsreerag.com·Dec 20, 2024Efficiently Optimizing Component Renders with React.memoIn React, performance optimization is crucial, especially when building applications with complex UI components. One of the lesser-known yet highly effective tricks is using React.memo to prevent unnecessary re-renders of your functional components. ...React
Ramu Narasingathinkthroo.hashnode.dev·Dec 4, 2024useMemo usage in Documenso, an open-source Docusign alternative.In this article, we analyse few arrow functions found in open source projects that are passed in as a parameter to useMemo or useCallback. I found these below list of functions in the wild, there could be more use cases but let’s control our sample s...Open Source
Eddie Qiaoeddieqiao.hashnode.dev·Dec 3, 2024useRef, useMomouseMemo 相当于 vue2 中的computed，依赖项不变，结果不会重新计算。 import { useEffect, useMemo, useState } from "react" function SearchUserList() { console.log(111); const [users, setUsers] = useState(null) const [searchKey, setSearchKey] = useState('') us...ReactHooks
Oleksandr VlasovforRoyalZSoftwareroyalzsoftware.de·Oct 23, 2024React Hooks — createContext, useContext, useMemoAs a junior React developer, I recently worked on a project to build a Todo Application using React with TypeScript. The goal was to build a functional app and dive deeper into React features like useState, useMemo, and especially useContext for stat...72 readsReact nativeJavaScript
고라니드로koranidro.hashnode.dev·Aug 16, 2024[React] 당신은 상태를 필요로 하지 않을 것입니다. #1 - 보존(with. useMemo) 편이 포스트는 React 버전 18.3.1을 기준으로 합니다. const state = heavyFactory(); useState와 useEffect 없이 위와 같은 코드로 파생 상태를 운용하고 싶습니다. 그런데 작업이 꽤 오래 걸립니다. 한 번 정도는 괜찮지만, 렌더링마다 반복되는 것은 꽤 부담스럽습니다. 눈물을 머금고 이전 방식으로 돌아가야 하는 걸까요? 걱정하지 마세요. 아래와 같이 간단히 해결할 수 있습니다. const state =...41 reads[React] 당신은 상태를 필요로 하지 않을 것입니다.React
Animesh Kumaranimeshk.hashnode.dev·Jul 7, 2024Understanding React HooksReact Hooks are a powerful feature that allows you to use state and other React features without writing a class. Introduced in React 16.8, hooks have changed how we write React applications by making code simpler and more readable. In this blog, we ...10 likesReact
Manvendra Singhnoder254.hashnode.dev·Jul 7, 2024Advanced Hooks: useMemo and useCallbackIntroduction Understanding the Importance of Optimization in React In the rapidly evolving landscape of web development, React has cemented its place as a go-to library for building dynamic and interactive user interfaces. However, as applications gr...hooks
Abeer Abdul Ahadabeer.hashnode.dev·Jun 12, 2024Crucial React Hooks That Are Less UnderstoodIntroduction As React has become the top choice for building web applications, it's important to master all the concepts and topics that makes learning react incomplete without. If you have ever studied react for at least once, I am sure you know tha...28 readsReactReact
Kayoungkykim.hashnode.dev·May 21, 2024React 렌더링 최적화React 렌더링이란? 리액트에서 렌더링이란, 컴포넌트가 현재 props와 state의 상태에 기초하여 UI를 어떻게 구성할지 컴포넌트에게 요청하는 작업을 의미한다. 즉 사용자 화면에 View(내용)를 보여 주는 것. 초기 렌더링 렌더링을 담당하는 render 함수는 컴포넌트의 정보를 이용해 화면을 구성(렌더링)한다. 컴포넌트 내부에는 또 다른 컴포넌트들이 들어갈 수 있어, render 함수가 실행되면 그 내부에 있는 컴포넌트들도 재귀적으로 렌...TechReact
Ugne Adomaityteugneadomaityte.hashnode.dev·May 19, 2024useCallback vs. useMemo in ReactReact offers plenty of hooks for various use cases. useMemo and useCallback are widely used hooks in the React community to solve performance issues. While they might seem similar, it's crucial to understand the key differences in how they function. ...useMemo
![[React] 당신은 상태를 필요로 하지 않을 것입니다. #1 - 보존(with. useMemo) 편](https://cdn.hashnode.com/res/hashnode/image/stock/unsplash/UYsBCu9RP3Y/upload/3f9c08b8e581915a7f5a491b6b2ff46c.jpeg?w=1600&h=840&fit=crop&crop=entropy&auto=compress,format&format=webp)
