Resources

Articles

• 5 Mistakes to avoid whend using React Hooks
• Complete Guide to useEffect
• Don’t over useState
• How to solve the infinite loop of useEffect
• How to useMemo and useCallback
• How to use React Context effectively
• How to write performant React code
• Putting props to useState
• React re-render guide
• Should you useState or useReducer ?
• Symplifying useEffect
• The mystery of React Element, children, parents and re-renders
• The State Initializer Pattern
• Things to know about useState
• Understanding useMemo and useCallback
• useState for one-time initializations
• useState vs useReducer
• When to useMemo and useCallback
• Why React Re-Renders
• Writing clean React

Courses

• Animations Dev 🎥 🚀
• BuildUI 🎥 🚀
• EpicReact Dev 🎥 🚀
• Learn Next.js
• Next.js 14 Complete Course 🎥 🚀
• Official React Query Course 🎥 🚀
• Opinionated React 📕
• React Infographics 📕
• The Joy of React 🎥 🚀

Packages

• pacocoursey/cmdk
  • Unstyled command menu component.
• davidjerleke/embla-carousel
  • A lightweight carousel library with fluid motion and great swipe precision.
• guilhermerodz/input-otp
  • Accessubke abd ustyled one time passcode input.
• aidenybai/million
  • Optimize react performance and make your React 70% faster in minutes.
• tanstack/query
  • Powerful asynchronous state management, server-state utilities and data fetching for the web.
• react-dnd/react-dnd
  • Set of React utilities to help you build complex drag and drop interfaces.
• react-grid-layout/react-draggable
  • A simple component for making elements draggable.
• react-grid-layout/react-grid-layout
  • A draggable and resizable grid layout with responsive breakpoints for react.
• react-hook-form/react-hook-form
  • React hooks for form state management and validation.
• react-grid-layout/react-resizable
  • A simple react component that is resizable with a handle.
• streamich/react-use
  • Collection of essential hooks.
• bettertyped/react-zoom-pan-pinch
  • React library to support easy zoom, pan and pinch on various html dom elements.
• tremorlabs/tremor
  • React components to build charts and dashboards.
• uidotdev/usehooks
  • Collection of modern and server-safe hooks.
• shadcn-ui/ui
  • Beautifully designed components that you can copy and paste into your apps.
• immerjs/use-immer
  • Hook to use immer as a react hook to manipulate state.
• pmndrs/zustand
  • Small, fast and scalable state management solution.
• xyflow/xyflow (also known as react-flow)
  • Pwerful library for building node-based user interfaces with react.

Talks & Videos

• Avoid using isLoading for data fetching
• Hydration failed because the initial ui does not match what was rendered on the server
• React Hook Form (+ Zod & TypeScript & Server Errors)
• Server Components in Client Components ?
• Stop Conditional Rendering in React Without Knowing This (&& vs Ternary Operator)
• The useTransition hook
• When & Where to Add “use client” in React / Next.js (Client Components vs Server Components)

Various

• enaqx/awesome-react
  • A collection of awesome things regarding react ecosystem.
• brillout/awesome-react-components
  • Curated list of react components & libraries.
• Aceternity UI
  • Copy paste trending components and use them in your websites without having to worry about styling and animations.
• Lunar UI
  • Collection of interactive tailwind components built for react.
• Magic UI
  • Another collection of react & tailwind components for react.
• Next UI
  • Library for react that helps you build beautiful and accessible user interfaces.
• Next UI Pro
  • Collection of over 180+ beautiful and responsive components.
• React TypeScript Cheat Sheet