Dan Bahramidanbahrami.hashnode.dev·Jun 27, 2024React patterns: Combining hooks with child functions for composable data componentsI'd like to share a quick example of a React pattern I find myself reaching for a lot recently. Well really it's a combination of two patterns: A React hook which gets some data or application state A provider component which accepts a child functi...React
Tirtha Guhablog.tirthaguha.net·Mar 22, 2024Organizing your react componentsI'm not sure how much this matters in the era where generative AI writes code for you. However, still I embark upon this journey hoping this will help someone write better react code. Why you should organize your react components React itselft is uno...13 likesui-architecture
Akash Thoriyaakashthoriya.hashnode.dev·Jan 31, 2024Provider Pattern in ReactExpert-Level Explanation The Provider Pattern in React leverages the Context API to pass data deeply through the component tree without explicitly passing props at every level. This pattern involves two main parts: the holding component Provider, whi...57 readsReactJS Fundamentals for InterviewsReact
Yeled THEOPHANEyeledtheo.hashnode.dev·Nov 4, 2023React refs and useImperativeHandle hook : A secret sauce for creating complex and reusable custom components.Refs in react are objects that allow us to store values (of any type) that do not trigger re-renders when updated. Native elements have props ref which we can set to a ref we created before, to get a direct reference to that element. This allows us t...React
Shubham Mathurlearnjswithshubham.hashnode.dev·Jul 14, 2023An Advanced React Pattern - A HOC & Render PropsWhen you are writing a new App or Software, It's very essential to pin down the overall details and architecture even if it's only high level, It helps to determine the shape and scalability of any software. Design pattern helps us to do exactly the ...42 readsReact
Oluwatobi Adegoketobidevs.hashnode.dev·May 19, 2023Render-props pattern in ReactThe render-props pattern is a technique for sharing props between components. It involves passing a function as a prop to a component, which then renders this function as part of its output. As an overview, render-props pattern looks like this; impor...25 likes·98 readsReact
Durgesh Upadhyayudurgesh6.hashnode.dev·Mar 22, 2023Control props patternA React design pattern that allows a parent component to control the state of a child component. It involves passing a callback function from the parent component to the child component, which the child component will then call when it needs to updat...128 readsReact
Yaseenblog.gailani.dev·Feb 14, 2023Build a modal component with a powerful React hookPS: This article is aimed at intermediate-level devs. If you're a beginner, you're more than welcome to read on, but don't get discouraged by the things you may not understand, just add them to your learning list, and come back any time. Ok, let's ge...90 readsReact
Giorgos Athanasouliasathanasu.hashnode.dev·Jan 1, 2023[LS] Advanced React ConceptsBefore jumping into the actual content, this post (and the upcoming ones) is one of the cheat sheets I keep in my Notion account. Since these notes were intended for personal use, the writing style is such that it is easy for me to understand. I want...1 like·41 readsreact-patterns
