Introduction
- React in 100 Seconds • Fireship 📺
- Learn React for free • Four-hour online course by Bob Ziroll and Scrimba that includes interactive coding challenges and exercises and culminates in building two apps 🎓
- Mental Model of React Application Development • 8 minute video by Basarat Ali explaining how JSX and the virtual DOM work under the hood 📺
- react.gg • The interactive way to master modern React 🎓
State Management
- when to use useState?
- when to use useReducer?
- when to use a state machine?
- when to use Context?
- when to use another library?
- TanStack Query
- Recoil
- Redux Toolkit
- etc
- 📺 What State Management Library Should I Use with React? • 9 minute video by Lee Robinson explaining good options for separately managing UI state (e.g.
xstate
) and server-caching state (e.g.react-query
,swr
). See the accompanying blog post for a table with specific solutions for various use cases - 📺 How I Manage State in React • 17 minute video by Leigh Halliday with tips for how to separately manage app state and external data in
react
- 📺 Introduction to React Recoil (Experimental) State Management • 28 minute video by Leigh Halliday using a shopping cart as an example to show how to use
recoil
to manage state - How to use React Context effectively • Kent C. Dodds 📖
- How to optimize your context value • Kent C. Dodds 📖
- Passing Data Deeply with Context • React docs 📚
- zustand • Bare necessities for state management in React 🛠️
Side Effects
SVG components
- 📺 SVG Components in React • 5 minute video by Basarat Ali showing how to create SVG components both manually and using
svgr
React Query
- 📺 All About React Query • 89 minute video by Tanner Linsley and Jason Lengstorf demonstrating how to use
react-query
to make cached fetch and post requests and keep them updated. Optimistic update method shown at 1:08:5 - 📺 React Query v3 - Refactor an app into using React-Query • 25 minute video by Weibenfalk showing how to refactor a movie search app infinite scrolling from custom data fetching hooks to
react-query
. - 📺 React shopping cart with TypeScript • 68 minute video by Weibenfalk showing how to create an ecommerce store using
react-query
3 and the Fake Store API - 📺 React Query - Data Fetching Hooks • 18 minute video by Leigh Halliday introducing how to use
react-query
to fetch data - 📺 Posting Data to Server from React - Query Updates from Mutations • 22 minute video by Leigh Halliday showing how to use
react-query
to update server-side data with an optimistic UI pattern
SWR
- 📺 Buffering new Tweets with SWR • 17 minute video by Sam Selikoff using a Twitter clone to demonstrate how to use
swr
to show cached content while fetching the latest content in the background
React Dev Tools
- Install in Chrome or Firefox: https://reactjs.org/blog/2019/08/15/new-react-devtools.html#how-to-get-it
- Useful for inspect state and props in production
Profiler API
React DevTools Profiler
- Introducing the React Profiler • React Blog 📖
- Profile a React App for Performance • Kent C. Dodds 📖
- Debugging React applications with the React Profiler API and the Profiler DevTool • LogRocket Blog 📖
<Profiler>
component
• React docs 📚 - React Production Performance Monitoring • Kent C. Dodds 📖
- The definitive guide to profiling React applications • Ovie Okeh 📖
Preventing unwanted rerenders
- Why React Re-Renders • Josh Comeau 📖
- Use React.memo() wisely • Dmitri Pavlutin 📖
- JSX was a Mistake • Kyle Shevlin 📖
- Careful with Context Composition • Kyle Shevlin 📖
View more list items
const ItemsWithViewMore = ({ items, initialLimit, increment }) => {
const [limit, setLimit] = useState(initialLimit)
const visibleItems = items.slice(0, limit)
const handleViewMoreClick = () => setLimit(limit + increment)
return (
<section>
<h2>Items</h2>
<ul>
{visibleItems.map(item => (
<Item {...item} />
))}
</ul>
{visibleItems.length < items.length && (
<button onClick={handleViewMoreClick}>View more</button>
)}
</section>
)
}