CleeveCleeve
Back

React Resources

16 bookmarks

Avoiding useEffect with callback refs

Interacting with DOM nodes doesn't necessarily need useEffect

Avoiding useEffect with callback refs
Avoid Global State — Co-locate with Uncontrolled Compound Components

Over the years, I've thought a lot about colocation and how to effectively apply this principle to the components I build. I began to notice a pattern emerge in my work and I'd like to share it.

Application State Management with React

How React is all you need to manage your application state

Application State Management with React
State Colocation will make your React app faster

How state colocation makes your app not only more maintainable but also faster.

State Colocation will make your React app faster
The Latest Ref Pattern in React

How to improve your custom hook APIs with a simple pattern.

The Latest Ref Pattern in React
Why you shouldn't put refs in a dependency array

If you use a ref in your effect callback, shouldn't it be included in the dependencies? Why refs are a special exception to the rule!

Why you shouldn't put refs in a dependency array
Example of Using useSyncExternalStore with LocalStorage | 56kode

Learn how to efficiently synchronize application state with external data sources like LocalStorage using React's useSyncExternalStore hook, with a practical example and detailed explanation.

Example of Using useSyncExternalStore with LocalStorage | 56kode
How to share a React Component with the URL

Learn how to spot and eliminate duplicate sources of truth in your React apps.📝 React docs on unnecessary Effects: https://react.dev/learn/you-might-not-nee...

How to share a React Component with the URL
Animate streaming text with a one-line hook

Learn how to build a useAnimatedText() hook with Framer Motion that can be added to any React app to animate streaming text.🚀 Follow along with my new cours...

Animate streaming text with a one-line hook
Building a Reusable Component that Animates on Scroll

Learn how to make an unstyled FadeUp component that animates on scroll and can be reused throughout your app. Built with React and Framer Motion.🚀 Sign up t...

Building a Reusable Component that Animates on Scroll
Component Composition is great btw

Component composition is one of the best parts of React, and I think we should take more time to break our components into manageable parts before littering one component with conditional renderings.

Component Composition is great btw
Creating multi-window Electron apps using React portals

Don’t increase your Electron app code complexity as you add more windows to it

Creating multi-window Electron apps using React portals
Common Sense Refactoring of a Messy React Component

One thing I’ve learned from all the consulting I’ve done is that rewrites rarely lead to anything good. Almost in all cases, when you have an application…

Common Sense Refactoring of a Messy React Component
Dominik 🔮 (@TkDodo) on X

💁‍♂️React tip: I think most implementations of `usePrevious` will write to a ref in an effect and return it, but the rules of react advise us to not read refs during render. Here is my implementation, based on what I learned in the new react docs (https://t.co/JltAPkVKi4):

Dominik 🔮 (@TkDodo) on X
x.com
Haz (@diegohaz) on X

The open/closed React component: A component that is based on the open/closed principle, which states that “software entities (classes, modules, functions, etc.) should be open for extension, but closed for modification”. Thread 👇

Haz (@diegohaz) on X
x.com