Skip to main content

React

Introduction

State Management

Testing React components & hooks

  • Testing components that use React Router v6:
  • Testing hooks that use React Router v6:
    • Complete Guide to React Hooks Testing | Toptal®
      • Excellent article that got me out of a bind writing tests for a hook that reacts to changes triggered by React Router v6
      • Testing required rendering a hook (useQueryParams) inside of a RouterProvider and then using that router to navigate during the tests
      • Using @testing-libary/react-hooks, it’s possible to pass RouterProvider as a hook wrapper, but not possible to get back a reference to the router to use for router.navigate(). So, any navigate() calls are happening on a different router than the one wrapping the hook.
      • This article slowly builds up to @testing-library/react-hooks by showing you how you could write your own renderHook function that returns anything you want
      • I followed that pattern and wrote a custom renderHookWithRouter function that returns router along with the rendered hook

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

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

Profiler API

React DevTools Profiler

Profiler component

Preventing unwanted rerenders

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>
  )
}

Inbox