Links to articles to help developers with writing modern React (web) apps. Also includes links to modern Javascript (ES2016-ES2020).
NOTE: Currently these are links I've added to Pocket over the last 12 months, many of which I haven't read. I'm creating this page to help others, and to nudge me to start reading them. As I start reading through these, I will remove the articles that aren't too helpful, so that this page evolves into a list of vetted links.
NOTE 2: I am once again adding new links to this (Jan 2021)...12 months after the first batch were added. Some of those original links might be stale now and will be cleaned up later.
NOTE 3: Some of these links may require a Medium membership. If you find a link that requires a Medium membership, but the article is also available for free (because it was republished on Medium), please let me know and I'll update the link.
Future: I will consider adding TypeScript links.
- Accessibility
- Animation
- Architecture & Design
- Authentication
- Context
- CSS-in-JS
- Data Fetching
- Dev Tools
- Forms
- Hooks
- Hooks - Custom
- Material UI
- Performance
- Portals
- PWA
- Redux
- Refs
- Routing
- Storybook
- Suspense & Concurrent
- Testing
- Typescript & React
- The most useful accessibility testing tools and techniques
- A Guide to Accessible Interactive Components using React Libraries
- Act now to make your React website accessible
- Sharing React Components: From Atoms and Molecules to Pages
- Domain Driven Design and Functional Pure UI Components
- Understanding Compound Components in React
- 14 Beneficial Tips to Write Cleaner Code in React Apps
- Some Best Practices for Building a React App With Hooks
- Domain-Driven Design With React
- Simple React Patterns
- The Benefits of Orthogonal React Components
- A deep dive into React Fiber internals
- Making stupid React smart in re-rendering
- 8 Useful Tricks for React Apps You Should Know
- Don't Sync State. Derive It!
- Leaky Components
- State Machines in React
- React Component Patterns
- Five common mistakes writing react components (with hooks) in 2020
- How React Uses Closures to Avoid Bugs
- React component code smells
- Thoughts on Device Based Code Split in React
- A Visual Guide to React Mental Models Part 1, Part 2: UseState, UseEffect And Lifecycles
- Blogged Answers: A (Mostly) Complete Guide to React Rendering Behavior
- When does React re-render components?
- How to build bulletproof react components
- Build A Confirmation Modal in React with State Machines
- Write clean(er) Components & JSX
- Redux VS React Context: Which one should you choose?
- The Problem with React's Context API
- Manage Global State with Context API and Hooks
- Learn React Context in 5 Minutes - A Beginner's Tutorial
- React Context Patterns with useContext Hook
- Using React Context, the Right Way
- Why Did You Render
- Adding React Fast Refresh to Your Create React App Project
- Profile a React App for Performance
- React Dev Tools - Debug Like a Ninja
- Best Practices for Handling a Form With Multiple Inputs Using React Hooks
- Handling React Forms and Validation with Formik and Yup
- The Guide to Learning React Hooks (Examples & Tutorials)
- Deep dive: How do React hooks really work?
- How to get previous props/state with React Hooks
- React's useEffect and useRef Explained for Mortals
- How to Use the useReducer React Hook to Share Data Between Components
- Introduction to React.memo, useMemo and useCallback
- The Wise Guide to React useState() Hook
- Two Part Series: Frustrations with React Hooks, Solutions to Frustrations With React Hooks
- What do they mean by memoized callbacks and what does useCallback actually do?
- Be Aware of Stale Closures when Using React Hooks
- When to useLayoutEffect Instead of useEffect
- React Hooks: Recipes
- The Power of React Hooks
- When to useMemo and useCallback
- 5 Mistakes to Avoid When Using React Hooks
- How to useEffect in React
- The last guide to the useEffect Hook you’ll ever need
- Your Guide to React.useCallback
- useEffect under the Hood
- How to use React.memo() to improve performance
- Understanding the useEffect Dependency Array
- A Complete Guide to useEffect
- useEffect is not the new componentDidMount
- Everything You Want to Know About React Refs
- React.useRef and React.createRef: The Difference
- useBreakpoint Hook — Get Media Query Breakpoints in React
- Rest Hooks
- React Async
- Custom React Hook to Share State Between Browser’s Windows
- 10 Ways to Optimize Your React App’s Performance
- Trim the Fat From Your Bundles Using Webpack Analyzer & React Lazy/Suspense
- 6 tips for better React performance
- A Story of a React Re-Rendering Bug
- How to Memoize Components in React
- React Hooks Oops: React hooks... Oops! Part 1 - Introduction, React hooks... Oops! Part 2 - why does my effect run multiple times with the same dependencies?, React hooks... Oops! Part 3 - an effect doesn't run again when its dependencies change
- Increase your React + Redux Application Performance With the Reselect Library
- State Colocation will make your React app faster
- Simplifying state management in React apps with batched updates
- Improve React Performance
- You’re overusing useMemo: Rethinking Hooks memoization
- Premature Optimize the Heck Out of Your React Apps Using Memoization
- Use React.memo Wisely
- React Hooks: Optimizing for performance
- Progressive React
- How to useRef to Fix React Performance Issues
- React is slow, what now?
- Optimize React Apps PageSpeed Insights Score
- React Faster Performance: Highlighting React Components Updates
- Profiling React.js Performance
- Measure Performance with the New React Profiler Component
- 3 common mistakes that impede React reconciliation and updating processes
- Advanced memoization and effects in React
- Performance Optimization with React Hooks and Memo
- Official Redux Style Guide
- How I reduced the code in my Redux app by using Redux Hooks
- Bridging the Gap between React's useState, useReducer, and Redux
- Selectors in a Redux World
- Understanding Javascript Selectors With and Without Reselect
- Simplify Redux Reducers with Lenses
- A guide to React refs: useRef and createRef
- Cleaning up the DOM with ForwardRef in React
- React: Using Refs with the useRef Hook
- The Complete Guide to React Refs
- How to Use React Refs
- React Refs: The Complete Story
- A Thoughtful Way To Use React’s useRef() Hook
- How to use React Ref
- Everything I Know About UI Routing by Ryan Florence
- How to restrict your Routes and Links in React.js now with Hooks
- A Quick Start Guide to Query Strings with React Router
- Nested routes with React Router v5
- Google Analytics with React Router
- Code Splitting by Routes and Components in React
- Storybook 5.3
- Declarative Storybook configuration
- Learn Storybook: Design Systems for Developers
- Building React Apps With Storybook
- Using Suspense with react-query
- Diving Into React Suspense Render-as-You-Fetch for REST APIs
- Suspense Explained
- How Concurrent React changes the game for data-heavy UI
- Code Splitting in React with Lazy Components
- Code-Split Your React App With Lazy and Suspense
- Code Splitting with React, React.lazy, and React Router v5
- A Gentle Introduction to Code Splitting with React
- Effective Code Splitting in React: A Practical Guide
- React Suspense in Practice
- Behavior-driven React development with Cucumber
- Javascript testing series from wanago.io: #1. Explaining types of tests. Basics of unit testing with Jest, #2. Introducing Enzyme and testing React components, #3. Testing props, the mount function and snapshot tests, #4. Mocking API calls and simulating React components interactions, #5. Testing hooks with react-hooks-testing-library and Redux, #6. Introduction to End-to-End testing with Cypress, #7. Diving deeper into commands and selectors in Cypress, #8. Integrating Cypress with Cucumber and Gherkin
- Mocking React hooks when unit testing using Jest
- Testing React Hooks With Enzyme and React Testing Library
- Testing Custom React Hooks with Jest
- How to Test React Hooks (The Async Ones)
- Test React apps with React Testing Library
- How to Create and Test React Custom Hooks
- How to Write Functional Tests in React (Part 1)
- Complete Guide on Unit and Integration Testing of React/Redux Connected Forms
- How To Do the Basics in React Testing Library
- How to Test React Components: the Complete Guide
- Write Fewer, Longer Tests
- Declarative and Scalable Testing With React Testing Library
- The Practical Guide to React Testing Library with TypeScript
- Modern React Testing: Part 1: Best Practices, Part 2: Jest & Enzyme, Part 3: Jest & React Testing Library, Part 4: Cypress & Cypress Testing Library
- How to Test React.useEffect
- Discovering Mock Service Worker
- An in-depth beginner's guide to testing React applications in 2020
- How to use React Testing Library Tutorial
- Common mistakes with React Testing Library
- 9 React Testing Library Tips and Tricks
- React TypeScript Cheatsheets
- TypeScript + React: Component patterns
- A peculiar journey to a generic React component using TypeScript
- Typescript & React: Manipulating Prop Types
- React + TypeScript: The Good Parts
- The Better Way to Type React Components
- Do not create union types with Redux Action Types. It's most likely an antipattern.
- How to Use Redux in Your React TypeScript App
- React TypeScript: Basics and Best Practices
- React with TypeScript: Best Practices