for the context API i like to use this pattern where i have a single file that - creates the context with the default value undefined, but does not export it - creates and exports a provider component - creates and exports a custom hook that uses useContext and throws if the context value is undefined this way you always only import one thing (useMyContext hook) and you'll also always immediately know if you're using a component and there's no provider in it's parent hierarchy.
This content was a gold mine. Started using React more in depth a few weeks ago to build a booking app, and I was just getting to the point of needing something like Suspense to conditionally render UI. Thanks!
React's flexibility comes with great responsibility. I once worked on a React project where everything is memoized. We thought it would improve performance, but lately I realized it was a premature optimization
Great video! I need this course for my start up project im currently working on.
i love that you're explanations have no ummm's or aaaaa's, making them bearable and even entertaining to watch. love the edits
In number 9 while technically correct there is a pretty decent size caveat. React 16 and 17 will batch setStates as long as it not in an async function. If you are in an async function you can use unstable_batchedUpdates to batch setStates. The latter being pretty hacky in my mind, but can save you from a large refactor
Not all heros wear capes, so much good nuggets in here. I use currying all the time but I didn't know about glean and now I know how to deal with the index.tsx index.tsx index.tsx issue in my vscode tab bar ☺
Your videos are amazing man. Whenever I need a quick refresher you're the go to! Really appreciate all your hard work.
Some of these are anti-patterns as well. Spreading props is an anti-pattern because it is not declarative and it can cause unneeded exporting of types between components. Additionally, your curried function should be nested within a useCallback() to prevent extra re-renders. If you want to teach against anti-patterns, it would be better if you taught your audience eslint recommended settings for common plugins.
Doing batched export with index files (4:35) stops vscode from being able to automatically refactor function and variable names when using F2. It applies the refactor as an alias in the exported object of the index file
Rather than creating a custom hook just for storing related state, useReducer can be more ergonomic as it can also provide you with a single dispatch function that can update that state using actions. As for the second point about nesting; this also comes with a gotcha in that the parent component will update all its children when it updates state that may just be used for a few or a single child. It's useful if child components are reusable, but unnecessary otherwise. It's fine to co-locate state and event handlers in child components and is often easier to reason about; If you truly run into performance issues due to unnecessary re-renders, you can wrap child components in React.memo.
Suuuper pumped for the new React course on Fireship Pro
Except the useMemo(), I do nothing like this, probably, I learnt from the Pros. That confusion whether to use context or Redux, I found out that people use context less so I understood it wasn't meant to be a complete alternative of Redux but Redux was too complicated, especially when my first project had it overengineered with Thunks, Slices and what not. I searched for an alternative and found PullState, I can't say if it's a good alternative but it did ease all my work and the code, it made it understandable and considering the huge project it was, I found no issues in anything.
This video just made me very happy that I work with Svelte...
Great video. As a beginner, i learned a lot in these 9 minutes. Thanks! 🔥 🚀
Awesome, educational video! Really appreciate the effort (and also the humor) that went into this. Also, this is the first tutorial video I watch on default speed and not 1.5x 😅
Your course is surely gonna be awesome 🔥💪🏻
Awesome explanation! Thank you so much for making this video!
this was awesome. i love that last tip!
@micnubinub