Interacting with DOM nodes doesn't necessarily need useEffect

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.

How React is all you need to manage your application state

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

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

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!

by Fernando

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.

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...

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...

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...

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.

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…

💁‍♂️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):

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 👇