Neelesh Royweekly-frontend-articles.hashnode.dev·Oct 20, 2024How to Migrate a Nested React Context Tree to Recoil: A Step-by-Step GuideConsider an application with multiple context providers: <UserProvider> <ThemeProvider> <SettingsProvider> <SearchProvider> <App /> </SearchProvider> </SettingsProvider> </ThemeProvider> </UserProvider> This seems sma...DiscussReact
Smit Khanparause-sync-external-store.hashnode.dev·Sep 23, 2024Replacing Context API and State Management Libraries with useSyncExternalStoreIn React apps, managing state across several components is essential to a seamless user experience. While the Context API is a common tool for managing global states, it often leads to unnecessary re-renders. When a context value changes, all compone...DiscussReact
Sazzadur Rahmansazzadur.hashnode.dev·Jul 28, 2024How to Create a Custom React Hook for LocalStorage Using React ContextManaging local storage in React applications can become cumbersome, especially when you need to synchronize data across multiple components. By creating a custom hook combined with React Context, you can simplify this process and make your code more ...Discuss·1 like·35 readsReact
DannyforfreeCodeCampfreecodecamp.org·Jul 22, 2024How to Use React's Context API – Tutorial with ExamplesIn React, data is typically passed down from parent to child via props. But this can lead to "prop drilling" – where we have to pass props down through lots of components to get them where they're needed. Also, some props (for example, the current au...DiscussReact
Arturcode-with-arthur.hashnode.dev·May 28, 2024Understanding React Context: A Kid-Friendly GuideSometimes in a React app, you have data that many components need to access. Passing this data through props can become cumbersome and messy. Imagine you have a big family and you need to pass a message to every member individually. It would take a l...DiscussReact Provider
Nowon Leeblog.nwlee.com·Apr 6, 2024React Context로 모달 관리하기모달 컴포넌트 예시 예전에는 리액트 프로젝트에서 모달 컴포넌트를 렌더링할 때는 다음과 같은 방법을 주로 적용했다. // Modal.tsx interface ModalProps { isOpen: boolean; onClick: () => unknown; onClose: () => unknown; } const Modal = (props: ModalProps) => { const { isOpen, onClick, onClose } =...Discuss·29 readsReact
Kevin Millerkevinmiller.hashnode.dev·Mar 27, 2024React Context API: Solving State Management ChallengesIn the world of React development, managing state effectively is crucial for building robust and scalable applications. As applications grow in complexity, traditional state management approaches can become cumbersome, leading to issues such as prop ...Discusshire reactjs developer
Benedicta OnyebuchiforfreeCodeCampfreecodecamp.org·Jan 5, 2024How to Use React Context in Your Project – Beginner's GuideAs beginners, managing state in React applications can be challenging, especially when passing and utilizing props in deeply nested components. The usual way of passing information from a main component to its smaller parts — like a parent passing d...DiscussReact
Henna Singhcodelady.hashnode.dev·Jan 5, 2024Reusability - ReactNotes from Scrimba Advance React course React allows to create components that can be re-used anywhere its needed in the application. This helps simplify codebase in larger code-bases. The listed topics include: Children Compound Components Contex...Discuss·1 like·63 readsFrontend Developer Bootcampreact components
Atchyut Nagabhairavablog.atchyutn.com·Dec 19, 2023Creating a Reusable Snackbar Component in Next.jsNotifications and alerts are an essential part of user interaction in web applications. They inform users about successes, errors, and other significant events. Material-UI’s Snackbar component is a popular choice for displaying these brief messages....Discuss·31 readsNotification System,
