Skip to main content

React

Introduction

State Management

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