Tito Adeoyetitoadeoye.hashnode.dev·14 hours agoReact Hooks: useMemo (With Practical Examples)Hello again, fellow React traveler👋 If you’ve been building React apps for a while, you might have encountered performance hiccups, especially as your app grows in complexity. One of the most useful tools in your React toolbox to combat these is the...React Hooks Unboxed 📦: A Beginner's Adventure 🚀React
Pranav Bawgikarpranavbawg.hashnode.dev·Feb 16, 2025React Hooks & why they make life so much easier[32] useState It manages the state in a functional component. For example, toggle visibility of text. const [visible, setVisible] = useState(false); onClick = { () => setVisible(!visible)}; useEffect React has a new tool called the useEffect hook. I...React
Johnny Santamariadaily-ui-challenge-intro.hashnode.dev·Feb 7, 2025Mastering React: Day 17 - Building Powerful Analytics ChartsIf you want to see yesterday's challenge: Receipt Interface in React If you want to try the challenge yourself: DailyUI Today, we're designing analytics charts, an essential feature for modern data visualization. I've created a flexible, interactive...React
Abhishek Sadhwaniabhisheksadhwani.hashnode.dev·Feb 1, 2025React Performance Optimization: The Art of Avoiding Useless RendersReact is designed to be highly efficient, but unnecessary re-renders can still slow down your application. Optimizing performance by minimizing redundant renders ensures a smoother user experience. This blog explores key techniques to avoid unnecessa...React
Ovilash Jaluijaluiovilash.hashnode.dev·Dec 31, 2024Understanding React Hooks: Best Practices for MERN DevelopersIntroduction React has revolutionized front-end development, offering developers an intuitive and efficient way to build user interfaces. Among its many features, React Hooks stand out as a game-changer, enabling functional components to manage state...10 likesreact hooks
Onkar Karaleonkarkarale.hashnode.dev·Dec 28, 2024React Context and Hooks: The Modern Approach to State Management 🚀Gone are the days of "prop drilling" and complex state management boilerplate. React's Context API, combined with Hooks, has revolutionized how we handle state management in modern React applications. In this deep dive, we'll explore how these powerf...2 likesJavaScript
Nowon Leeblog.nwlee.com·Dec 16, 2024NextJS에서 캘린더 컴포넌트 개발하기요구사항 캘린더 컴포넌트를 개발하게 된 계기는 다음과 같다. 공개된 라이브러리는 프로젝트에 맞게 UI를 변경하기 까다롭다. 서버 사이드 렌더링 프레임워크의 경우 렌더링에서 에러가 발생하는 경우가 종종 있다. 라이브러리마다 지원하는 기능의 범위가 다르다. Next.js 프로젝트를 세팅하고 기본적인 달력 기능을 하는 페이지를 만들어 본 과정을 기록했다. 컴포넌트를 작성하기 전 다음과 같은 작업을 거쳤다. create-next로 Next....Next.js
Nowon Leeblog.nwlee.com·Dec 16, 2024React 웹 페이지에서 Quill 에디터 텍스트 수정 페이지 작업하기Quill Quill은 웹에서 사람들이 텍스트를 편하게 입력할 수 있도록 도와주는 텍스트 에디터이다. Quill을 도입한 이유는 다음과 같다. Quill은 다양한 서식의 텍스트를 작성할 수 있는 위지윅 에디터이다. 다양한 플랫폼을 지원한다. 오픈소스로 공개되어 도입하기 어렵지 않다. 프로젝트에서 필요로 하는 모듈만 도입하여 에디터를 개발할 수 있다. React에서 Quill 공식문서에서는 에디터를 리액트 웹 페이지에 렌더링하는 방법을...React
Reme Le Haneremelehane.dev·Dec 10, 2024Using useReducer for Complex State LogicSkill: Manage Complex State with useReducer Instead of juggling multiple useState calls, you can use useReducer to handle state transitions in a more structured way, similar to how Redux works. When to Use useReducer When your state has multiple int...React
Nowon Leeblog.nwlee.com·Dec 9, 2024타입스크립트 라이브러리 프로젝트 진행하면서 겪은 시행착오계기 리액트 프론트엔드 프로젝트에 참여해서 캘린더 컴포넌트를 작성했던 적이 있었다. 외부 라이브러리로 제공되는 캘린더 컴포넌트는 디자인을 변경하거나 라이브러리에 없는 필요한 기능을 추가하는데 시간이 많이 소요됐던 적이 있었다. 디자인에 관계없이 캘린더 기능을 제공해주는 리액트 훅이 있었으면 좋겠다고 생각했다. 깃허브에서 찾아볼 수 있는 라이브러리 저장소는 여러 패키지로 이뤄진 단일 저장소로 구성되어있는 경우가 많았다. 실제 라이브러리 예시 ...TypeScript