[rig] Typo and grammar fixes (#532)

packages/react-interview-playbook/contents/introduction/en-US.mdx

@@ -148,7 +148,7 @@ System design questions test a candidate's ability to architect scalable, mainta
 System design questions can broadly be classified into two types:
 
 - **Application design**: App design questions aren't specific to any front end technology but sometimes interviewers might ask you how you would implement a specific section and you would have to mention concrete libraries/approaches using React/Vue/Angular/Svelte/etc and which of their APIs you'd use.
-- **Component design**: Component design questions are about implementing a reusable, extensible, and accessible component for a specific purpose using a specific JavaScript framework of your choice or Vanilla JavaScript if you're adventurous enough. Hence mastery of the JavaScript framework is essential and component design in order to design the right props and composition mechanisms.
+- **Component design**: Component design questions are about implementing a reusable, extensible, and accessible component for a specific purpose using a specific JavaScript framework of your choice or Vanilla JavaScript if you're adventurous enough. Hence mastery of the JavaScript framework is essential in component design in order to design the right props and composition mechanisms.
 
 **Important topics**
 

packages/react-interview-playbook/contents/react-basic-concepts/en-US.mdx

@@ -33,7 +33,7 @@ There are two ways of writing React components:
 
 The modern recommended way is to write JavaScript functions that return JSX. React hooks (e.g. `useState`, `useEffect`, etc.) was introduced in React 16.8 and are used for state and side effects. Prior to the introduction of hooks, function components could only be used for components that didn't contain any state.
 
-Function components require less boilerplate and preferred over class components.
+Function components require less boilerplate and are preferred over class components.
 
 ```jsx
 function Greeting({ name }) {
@@ -55,7 +55,7 @@ class Greeting extends React.Component {
 }
 ```
 
-Although class components can still be asked in interviews, you shouldn't be faulted for not having experience with class components since it has been over half a decade that functions components have been the de facto way of writing components. If you haven't used class components before, there's no need to learn about it and you can just tell your interviewer.
+Although interviewers may still ask about class components, you shouldn't be faulted for not having experience with class components since it has been over half a decade that functional components have been the de facto way of writing components. If you haven't used class components before, you can just tell your interviewer that, there's no need to learn about them.
 
 ## JSX
 
@@ -125,7 +125,7 @@ Further reading on react.dev: [Passing Props to a Component](https://react.dev/l
 
 ### State
 
-State can be viewed as the "memory" of a component instance. Each component instance's state is isolated and cannot be directly modified from external.
+State can be viewed as the "memory" of a component instance. Each component instance's state is isolated and cannot be directly modified from external sources.
 
 - Managed within the component
 - Triggers a re-render when updated
@@ -143,7 +143,7 @@ Further reading on react.dev: [State: A Component's Memory](https://react.dev/le
 
 ## Rendering
 
-Traditionally, rendering in the context of the browser is the process by which a web browser takes the raw code of a webpage – primarily HTML, CSS, and JavaScript – and converts it into the visual, interactive page you see on your screen. However in React also uses the term "rendering" to describe how React converts components into actual DOM elements to be shown on the screen.
+Traditionally, rendering in the context of the browser is the process by which a web browser takes the raw code of a webpage – primarily HTML, CSS, and JavaScript – and converts it into the visual, interactive page you see on your screen. However, React also uses the term "rendering" to describe how React converts components into actual DOM elements to be shown on the screen.
 
 To avoid confusion, in this guide, "rendering" will refer to React's definition and "browser rendering" will be referred to as "browser painting".
 

packages/react-interview-playbook/contents/react-data-fetching/en-US.mdx

@@ -141,7 +141,7 @@ This problem can be fixed/improved in multiple ways:
 
 1. **Debouncing**: Debouncing ensures that requests are sent only after a period of inactivity, which reduces the chance of race conditions. However, if the request latency is longer than the debounce duration, then race conditions can still occur. Debouncing is not a foolproof approach.
 2. **Cancelling previous requests**: Use `AbortController` to cancel in-flight API requests when a new one is made.
-3. **Ignore/discard outdated responses**: Before displayed data, determine if the response is for the current query, and ignore/discard the responses that aren't relevant.
+3. **Ignore/discard outdated responses**: Before displaying data, determine if the response is for the current query, and ignore/discard the responses that aren't relevant.
 
 ### Setting state after unmount
 
@@ -179,7 +179,7 @@ Data fetching isn't only limited to querying, there's also mutations. A data mut
 
 ### Optimistic updates
 
-The typical steps in a data mutation with any optimizations:
+The typical steps in a data mutation without any optimizations:
 
 1. Trigger the API request (POST, PUT, DELETE)
 1. Show a loading state while the request is in progress
@@ -196,7 +196,7 @@ Optimistic updates are a technique used in data mutations where the UI updates b
 1. If the request succeeds, keep the UI as it is
 1. If the request fails, rollback the UI to its previous state and show an error message
 
-Optimistic updates reduce perceived latency and improves user experience.
+Optimistic updates reduce perceived latency and improve user experience.
 
 ```jsx
 const handleLike = async () => {
@@ -220,7 +220,7 @@ If the UI relies on cached data, the cache should be invalidated either by refet
 
 ## Query libraries
 
-By now you probably agree with me that data fetching is such a huge pain to implement properly. But not to worry, query libraries to the rescue!
+By now you probably agree with me that data fetching is a huge pain to implement properly. But not to worry, query libraries to the rescue!
 
 Query libraries are specially designed to handle data fetching, caching, synchronization, and state management in front end applications. They simplify making API requests while optimizing performance and user experience. Popular examples include [TanStack Query](https://tanstack.com/query/latest), [useSWR](https://swr.vercel.app/), and [Apollo Client](https://www.apollographql.com/) (for GraphQL).
 

packages/react-interview-playbook/contents/react-design-patterns/en-US.mdx

@@ -38,7 +38,7 @@ Further reading on react.dev: [Higher-Order Components – React](https://www.pa
 
 Render props involves passing a function that renders an element as a prop to a component. The component calls the prop with certain parameters, which is usually its own state.
 
-This allows the parent to the component to render based on the the component state still allowing the parent to customize the behavior/appearance from outside.
+This allows the parent of the component to render based on the component state, allowing the parent to still customize the behavior/appearance from outside.
 
 ```jsx
 function MouseTracker({ render }) {
@@ -81,15 +81,15 @@ Further reading on react.dev: [Render Props - React](https://www.patterns.dev/re
 
 The Container/presentational pattern is a design pattern used in React to separate state management (logic) from UI rendering (presentation). It helps in making components reusable, maintainable, and testable by ensuring a clear separation of concerns.
 
-On the client, data can come from the user's input, fetched from an API, `localStorage`, WebSockets, etc. Not assuming where the data comes from is a good way to structure your components.
+On the client, data can come from the user's input, an API, `localStorage`, WebSockets, etc. It is a good idea to structure your components in a way that does not make assumptions about where the data comes.
 
 **Presentational components:**
 
 - Focus only on rendering the UI
 - Do not contain state (except local UI state like toggles)
 - Receive all data via props and use event handlers (e.g. `onClick`, `onChange`)
-- Reusable and easy to test because they are independent of business logic
-- Does not assume how data is fetched
+- Are reusable and easy to test because they are independent of business logic
+- Do not make assumptions about how data is fetched
 
 ```jsx
 function UserList({ users }) {