feat: add react debugging video ids and transcripts (freeCodeCamp#59632)

Co-authored-by: Dario-DC <105294544+Dario-DC@users.noreply.github.com>
Co-authored-by: Zaira <33151350+zairahira@users.noreply.github.com>

Author: 3 people

curriculum/challenges/english/25-front-end-development/lecture-react-strategies-and-debugging/67d1ad82cff954a854bcbcaa.md

@@ -2,13 +2,118 @@
 id: 67d1ad82cff954a854bcbcaa
 title: What Is Prop Drilling?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: 83LkOesFkWI
 dashedName: what-is-prop-drilling
 ---
 
 # --description--
 
-Watch the video lecture and answer the questions below.
+Watch the video or read the transcript and answer the questions below.
+
+# --transcript--
+
+What is prop drilling?
+
+Prop drilling is the most basic approach to state management in React applications. It looks simple, but can get messy quickly, and is very hard to scale.
+
+Let's look at what prop drilling is, why it's a problem, and a good replacement for it as an application grows.
+
+Prop drilling is the process of passing props from a parent component to deeply nested child components, even when some of the child components don't need the props.
+
+For example, say you have three components named `Parent`, `Child`, and `Grandchild`. If you want to use some data in the `Grandchild` component, but it's in the `Parent` component, you'd need to pass it from the `Parent` to the `Child` component, then from the `Child` to the `Grandchild` component.
+
+Or if the data is even further up the chain, the data might have to be passed to the `Parent` component, too.
+
+Here, the data I want to display is the string `Hello, Prop Drilling!`. It's assigned to the `greeting` variable in the root `App` component:
+
+```jsx
+import "./App.css";
+import Parent from "./Parent";
+
+function App() {
+  const greeting = "Hello, Prop Drilling!";
+
+  return <Parent greeting={greeting} />;
+}
+
+export default App;
+```
+
+You can see the `Parent` component is also receiving the `greeting` variable as the value of a `greeting` prop. Here's the `Parent` component passing it into the `Child` component as the value of another `greeting` prop in the `Child`:
+
+```jsx
+import Child from "./Child";
+
+const Parent = ({ greeting }) => {
+  return <Child greeting={greeting} />;
+};
+
+export default Parent;
+```
+
+And here's the `Child` component that passes it to the `Grandchild` component:
+
+```jsx
+import Grandchild from "./Grandchild";
+
+const Child = ({ greeting }) => {
+  return <Grandchild greeting={greeting} />;
+};
+
+export default Child;
+```
+
+And finally the `Grandchild` component receives the greeting and uses it as the content of an `h1` element:
+
+```jsx
+const Grandchild = ({ greeting }) => {
+  return <h1>{greeting}</h1>;
+};
+
+export default Grandchild;
+```
+
+In the browser, you'll see a page with a single `h1` element that has the text `Hello, Prop Drilling!`.
+
+At first, prop drilling might not seem like such a big deal. But as your app grows, it gets harder to understand, debug, and maintain.
+
+If you need to pass props around, try to keep them all in a single parent component. This approach of centralizing all necessary data is called the "single source of truth".
+
+For instance, say you want to add a new `response` to go with your `greeting`, and that you want to use both of them in the `Grandchild` component. Since `greeting` is already in the `App` component, it makes sense to put `response` there, too, and pass both of them down the chain:
+
+```jsx
+function App() {
+  const greeting = "Hello, Prop Drilling!";
+  const response = "I'm not here to play!";
+
+  return <Parent greeting={greeting} response={response} />;
+}
+
+const Parent = ({ greeting, response }) => {
+  return <Child greeting={greeting} response={response} />;
+};
+
+const Child = ({ greeting, response }) => {
+  return <Grandchild greeting={greeting} response={response} />;
+};
+
+const Grandchild = ({ greeting, response }) => {
+  return (
+    <>
+      <h1>{greeting}</h1>
+      <h2>{response}</h2>
+    </>
+  );
+};
+
+export default App;
+```
+
+In the browser, you'll see a page with an `h1` element that has the text `Hello, Prop Drilling!` and an `h2` element that has the text `I'm not here to play!`.
+
+To avoid prop drilling, especially in large, complex applications, consider using the Context API or state management libraries like Redux and Redux Toolkit, Zustand, Recoil, and others.
+
+You'll learn more about these in the coming lectures.
 
 # --questions--
 

curriculum/challenges/english/25-front-end-development/lecture-react-strategies-and-debugging/67d2f5b78609f97400923f7f.md

@@ -2,13 +2,199 @@
 id: 67d2f5b78609f97400923f7f
 title: What Are State Management Libraries, and When Should You Use Them?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: 9GBjI8LDauU
 dashedName: what-are-state-management-libraries-and-when-should-you-use-them
 ---
 
 # --description--
 
-Watch the lecture video and answer the questions below.
+Watch the video or read the transcript and answer the questions below.
+
+# --transcript--
+
+What are state management libraries, and when should you use them?
+
+As your app grows, managing how data flows between components can become complex.
+
+When starting out, React's `useState` hook might be sufficient, but as you add features, you might encounter issues with:
+
+- Passing props through components that don't need them, also known as prop drilling
+- Keeping data in sync across different parts of your app
+- Handling complex updates that affect multiple components simultaneously
+
+These and other challenges may arise, which can lead to a codebase that's harder to maintain, debug, and test. That's where state management libraries come in – they provide a centralized place where components can get or update the data they need.
+
+Let's take a look at a few different state management options you have, and when to use them.
+
+The Context API is a state manager built into React that lets you share state across components without using a third-party library. It's a well-established upgrade over the `useState` hook, so it is perfect for cases like theme toggling or user authentication status.
+
+However, the Context API does not handle frequent updates well, and can cause unnecessary re-renders, making it less suitable for complex state needs in applications like eCommerce and social media platforms. 
+
+Here's a counter component that demonstrates the basic usage of the Context API:
+
+```jsx
+import { useState, createContext } from 'react';
+
+const CounterContext = createContext();
+
+const CounterProvider = ({ children }) => {
+  const [count, setCount] = useState(0);
+
+  return (
+    <CounterContext.Provider value={{ count, setCount }}>
+      {children}
+    </CounterContext.Provider>
+  );
+};
+
+export { CounterContext, CounterProvider };
+```
+
+This code creates a context and a provider to share a `count` state across the application.
+
+`CounterProvider` uses the `useState` hook to initialize and manage the `count` state and its setter. Both are then passed into child components through the `Provider`.
+
+So, when you wrap your whole app with the `CounterProvider`, the `count` state is available everywhere in your application.
+
+Here's how you can wrap `CounterProvider` around your application:
+
+```jsx
+import { CounterProvider } from './context/CounterContext';
+
+function App() {
+  return (
+    <CounterProvider>
+        {/* App components */}
+    </CounterProvider>
+  );
+}
+
+export default App;
+```
+
+And here's how you can use the `count` state:
+
+```jsx
+import React, { useContext } from 'react';
+import { CounterContext } from '../context/CounterContext';
+
+const Counter = () => {
+  const { count, setCount } = useContext(CounterContext);
+
+  return (
+    <>
+      <div style={{ textAlign: 'center' }}>
+        <h1>Context API Counter</h1>
+        <button style={{ marginRight: '5px' }} onClick={() => setCount(count - 1)}>
+          Decrease
+        </button>
+        <span>{count}</span>
+        <button style={{ marginLeft: '5px' }} onClick={() => setCount(count + 1)}>
+          Increase
+        </button>
+      </div>
+    </>
+  );
+};
+
+export default Counter;
+```
+
+As you can see, the `count` and its setter function, `setCount`, are initialized through the `useContext` function. 
+
+The current `count` state is then displayed, and `setCount` is used to increase and decrease the `count` state when the user clicks the decrement and increment buttons respectively.
+
+Another popular state management library is Redux, which is one of the most popular state management libraries to use with React. It's been around for a long time, and is ideal for larger applications like eCommerce and social media platforms, forums, and so on.
+
+Redux handles state management by providing a central store and strict control over state updates. It uses a predictable pattern with actions, reducers, and middleware.
+
+Actions are payloads of information that send data from your application to the Redux store, often triggered by user interactions.
+
+Reducers are functions that specify how the state should change in response to those actions, ensuring the state is updated in an immutable way.
+
+Middleware, on the other hand, acts as a bridge between the action dispatching and the reducer, allowing you to extend Redux's functionality (for example, logging, handling async operations) without modifying the core flow.
+
+The most common complaint about Redux is with all the boilerplate code you need to get started. In response, the Redux team introduced "Redux Toolkit" and "RTK Query", which simplify the setup process quite a bit.
+
+You typically define both actions and reducers in a single file using the `createSlice()` function. It's common to name the file so it ends with the word `Slice`, for example, `productSlice`, `userSlice`, `counterSlice`, and so on.
+
+Here's a `counterSlice` file to show you the basics:
+
+```jsx
+import { createSlice } from '@reduxjs/toolkit';
+
+const counterSlice = createSlice({
+  name: 'counter',
+
+  initialState: { count: 0 },
+
+  reducers: {
+    increment: (state) => {
+      state.count += 1;
+    },
+    decrement: (state) => {
+      state.count -= 1;
+    },
+  },
+});
+
+export const { increment, decrement } = counterSlice.actions;
+
+export default counterSlice.reducer;
+```
+
+From here, you then need to wrap the entire app with the `Provider`, select a piece of state from the slice with `useSelector()`, then use `useDispatch()` to make the state active.
+
+Another option to consider is Zustand.
+
+Zustand is a lightweight state management library with a simple API. It is based on hooks, so there's less boilerplate compared to Redux, making it easier and quicker to set up.
+
+Zustand is ideal for small to medium-scale applications. It works by using a `useStore` hook to access access state directly in components and pages. This lets you modify and access data without needing actions, reducers, or a provider.
+
+Here's a `useCounterStore` that implements another counter functionality:
+
+```jsx
+import { create } from 'zustand';
+
+const useCounterStore = create((set) => ({
+  count: 0,
+  increment: () => set((state) => ({ count: state.count + 1 })),
+  decrement: () => set((state) => ({ count: state.count - 1 })),
+}));
+
+export default useCounterStore;
+```
+
+And here's how to initialize and use the states in your app:
+
+```jsx
+// Import the useCounterStore (it's just a hook)
+import useCounterStore from '../useCounterStore';
+
+const Counter = () => {
+  // Initialize the states with the useCounterStore hook
+  const { count, increment, decrement } = useCounterStore();
+
+  return (
+    <>
+      <div style={{ textAlign: 'center' }}>
+        <h1>Zustand Counter</h1>
+        <button style={{ marginRight: '5px' }} onClick={() => decrement()}>
+          Decrease
+        </button>
+        <span>{count}</span>
+        <button style={{ marginLeft: '5px' }} onClick={() => increment()}>
+          Increase
+        </button>
+      </div>
+    </>
+  );
+};
+
+export default Counter;
+```
+
+Even though the frontend ecosystem is constantly evolving and new state management libraries regularly emerge, the ones we've discussed are widely used in the industry.
 
 # --questions--
 
@@ -86,35 +272,35 @@ Axios
 
 ## --text--
 
-What is the popular complaint about Redux, and how was it addressed?
+What was a common complaint about Redux, and how was it addressed?
 
 ## --answers--
 
-Limited browser support; addressed by creating polyfills.
+It had limited browser support, which was addressed by creating polyfills.
 
 ### --feedback--
 
-Think about improvements made to reduce setup complexity.
+Think about the improvements that were made to reduce setup complexity.
 
 ---
 
-Performance issues; addressed by optimizing middleware.
+It had performance issues, which were addressed by optimizing its middleware.
 
 ### --feedback--
 
-Think about improvements made to reduce setup complexity.
+Think about the improvements that were made to reduce setup complexity.
 
 ---
 
-Complexity of boilerplate code; addressed with Redux Toolkit and RTK Query.
+It required a lot of complex boilerplate code, which was addressed by Redux Toolkit and RTK Query.
 
 ---
 
-Lack of documentation; addressed by adding more examples.
+There was a lack of documentation, which was addressed by adding more examples.
 
 ### --feedback--
 
-Think about improvements made to reduce setup complexity.
+Think about the improvements that were made to reduce setup complexity.
 
 ## --video-solution--