React - The Road To Enterprise

Foreword
Acknowledgements
About the author
Contact
Introduction
About this book
Who is this book for?
How to follow this book
Code examples
Pre-requisites
Project Configuration and Useful Extensions
Setting up a React project
Plugins configuration
PostCSS
Stylelint
Configuring Sass
Tailwind
Prettier
TypeScript
Jest, Cypress, and Testing Library
Cypress & Testing Library
Jest & Testing Library
Formatting Code Automatically on Commit
What about Vite?
VS Code extensions
Summary
Scalable and Maintainable Project Architecture
Managing route components by feature
Encapsulating components and business logic
Summary
API Layer and Managing Async Operations
Implementing an API layer
Handling API states
How to avoid flickering loader
Abstracting API states and fetching with the useApi hook
Request cancellation
Enhancing the API layer to add abort logic
Error logging
Summary
Managing APIs with API Layer and React-Query
How to fetch data with React-Query
How to update data with React-Query
Pagination with React-Query
Infinite scroll with React-Query
Query cancellation with the API layer and React-Query
Cancel Function
Abort Signal
Summary
State Management Patterns in React Apps
Sharing state between sibling components by lifting state up
Context State Provider
How to improve performance and avoid unnecessary re-renders with Context API
Wrap JSX inside of the useMemo hook
Extract JSX into its own component wrapped with memo
Split the Context and use two separate context providers
Use the useContextSelector library.
Better state handling with useImmer and useReducer hooks
Immutable updates with useImmer
useReducer
Cleaner reducer with useImmerReducer
Reducer with Context API
Summary
Modern Redux - Global State Management with Redux Toolkit
Redux of the past
Modern Redux with Redux Toolkit (RTK)
API Requests with Redux Toolkit
API requests with RTK’s createAsyncThunk and API layer
Fetching Users
Adding and Deleting Users
State Normalisation
Normalising State with createEntityAdapter
Persisting Redux Store with RTK and Redux-Persist
Resetting Slices State and Redux Store
Resetting Users Slice
Resetting Whole Redux Store
API management with Redux & RTK Query
Integrating RTK Query with API Layer
Optimistic Updates
Summary
Global State Management with Zustand and Jotai
Zustand
Events Manager with Zustand
Computing derived state in selectors
Computing derived state with the useMemo hook
Computing derived state with the useEffect hook
Computing derived state with subscriptions
Simplifying selectors with a Pick helper
Simplifying Zustand state updates with Immer
Simplifying store creation with factory helpers
Persisting Zustand store
Async operations
Zustand with React-Query
Jotai
Atoms
Converting Events Manager to use atoms and how to derive atom state
Jotai with Immer
Persisting Atom State with atomWithStorage
Combining atomWithStorage and Immer
Async Requests with Jotai
Jotai with React-Query
Summary
Advanced Component Patterns
Higher Order Components
Render Props
Wrapper components
Polymorphic components
Composition vs Configuration - how to build flexible, maintainable and reusable components
Observer Pattern - communicating between sibling components
Summary
Managing Application Layouts
Route Layouts with React Router
Product Grid and List layouts with the useLayout hook
Summary
Performance Optimisation
Code-Splitting and Lazy-Loading routes and components with React.Lazy and React.Suspense
How to optimise and prevent re-renders of React components
Optimising component re-renders with memo and useCallback
Avoiding re-renders with useMemo
Reducing the number of re-renders by moving state down (state colocation)
Preventing re-renders by lifting components up
Optimising long lists by virtualising with React Virtual
Throttle and Debounce events to prevent frequent re-renders
Throttling mousemove events
Debouncing search requests
Tree-shaking
First example - Lodash
Second example - React Icons
Third example - UI frameworks
Choosing appropriate libraries and tree-shaking
What to look at when choosing libraries and do I even need one?
Reducing bundle CSS by removing unused CSS
Production Build
Summary
Application Security
Validate URLs
Rendering HTML
Third-party libraries
JSON Web Tokens (JWT)
Access permissions
Restricting access to specific content using the Permission component
Restricting access to private routes with the Permission component
Summary
React Testing - Best Practices For Writing Future-Proof Tests
Unit testing React components
How to test standalone React hooks
API mocking in React Unit Tests
End-to-end testing with Cypress
Useful testing tips
Summary
Static Site Generation (SSG), Incremental Site Renegeration (ISR) and Server Side Rendering (SSR) with Next.js (MJ_AD)
Next.js Project Setup
Pages and Routing in Next.js apps
Static Site Generation (SSG) with getStaticProps and getStaticPaths
Incremental Site Regeneration (ISR)
Server Side Rendering (SSR) with getServerSideProps
Running code server-side with API Routes
Restricting Access to Specific Pages with Middleware
Summary