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: 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.
- Animation
- Architecture & Design
- Authentication
- Context
- CSS-in-JS
- Data Fetching
- Dev Tools
- Forms
- Hooks
- Hooks - Custom
- Performance
- Portals
- PWA
- Redux
- Refs
- Routing
- Storybook
- Styled Components
- Suspense & Concurrent
- Testing
- 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
- 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
- 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
- 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
- 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
- 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
- React Styled Components Tutorial
- React. 7 tricks to work with Styled Components
- Styled Components, Styled Systems and How They Work
- Are You Drowning In A Pile Of Styled React Components?
- Building Reusable React UI Components with styled-components
- 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
- 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