$(''me .bio'').say(''Mediocre Arrogant'');
Joined November 2008
- Tweets1.3K
- Following387
- Followers430
- Likes361
Abhishek Khurana retweeted
📚 Automatic Query Invalidation after Mutations isn't a thing in React Query - but did you know that it takes just a couple of lines of code to build this in user-land? New blog-post is up now 🎉
ALT Automatic Query Invalidation after Mutations by TkDodo
Abhishek Khurana retweeted
Problem: You want to initialize something only once in a React component.
Solution: Call useState without a setter.
Idea via @TkDodo
![function Component() { // ✅ Stable. Resource is only instantiated once. const [resource] = useState(() => new Resource()) return ( <Provider resource={resource}> <App /> </Provider> ) }](https://pbs.twimg.com/media/GOBVE13WEAEHU1V.jpg?name=orig)
ALT function Component() { // ✅ Stable. Resource is only instantiated once. const [resource] = useState(() => new Resource()) return ( <Provider resource={resource}> <App /> </Provider> ) }
#NoteToSelf "If you want to learn something, read about it. If you want to understand something, write about it. If you want to master something, teach it.”
Abhishek Khurana retweeted
had never heard of AbortSignal.timeout, lets build a handy abstraction over it!
Abhishek Khurana retweeted
Use Zod to parse your environment variables once, then use that inference to type process.env throughout your app.
Also, a beautiful example of how you can extend an interface from a VALUE, not a type.
> Hey, TARS, what's your honesty parameter?
>> 'Ninety Percent.'
> Ninety Percent?
>> Absolute honesty isn't always the most diplomatic nor the safest form of 'communication with emotional beings.'
#Interstellar
Abhishek Khurana retweeted
Problem: Cache invalidation is hard.
Example: One of my clients uses React Query heavily. We have 100's of query keys, and many are quite complex. When a mutation occurs, we often need to invalidate multiple related queries. So, it's easy to forget to invalidate related queries when a mutation occurs.
Solution: Colocate related queries in the same file and centralize keys at the top. This helps us reuse keys, and helps us find related queries when writing a new mutation. (Example below)
Anyone else have tips in this area? cc @TkDodo
Abhishek Khurana retweeted
I often group related props into an object.
Advantages:
✅ Less code, so easier to read
✅ Clarifies the relationship between related fields
✅ Makes it easier to pass the data around
✅ Don’t need to change the component’s API when properties change
ALT // Separate props <UserDetails firstName={firstName} lastName={lastName} email={email} city={city} /> // Single prop <UserDetails user={user} />
