React by Ear

Episode

• 
  24 — Thinking in React: A Small Workout App 14.09.2026 37mnt

  Chapter 24 of React by Ear — From JavaScript to Interactive Apps.Pull the series together with an original workout-log app inspired by the React documentation. Break the interface into components, identify minimal state, choose ownership, and connect filters and forms with predictable data flow.Sources and attributionThinking in React — https://react.dev/learn/thinking-in-reactChoosing the State Structure — https://react.dev/learn/choosing-the-state-structureSharing State Between Components — https://react.dev/learn/sharing-state-between-componentsAdapted from React documentation by its authors under CC BY 4.0: https://creativecommons.org/licenses/by/4.0/License notice: https://github.com/reactjs/react.dev/blob/main/LICENSE-DOCS.mdIndependent AI-generated narration with adapted explanations and original workout examples. Not affiliated with or endorsed by React, Meta, or the source authors.
• 
  23 — Fetching Data and Handling Async UI 14.09.2026 47mnt

  Chapter 23 of React by Ear — From JavaScript to Interactive Apps.Build a clear mental model of loading, error, and success states. Handle stale responses and cleanup in a small fetching example, then understand where framework data loading and cache libraries can help.Sources and attributionuseEffect — https://react.dev/reference/react/useEffectSynchronizing with Effects — https://react.dev/learn/synchronizing-with-effectsAdapted from React documentation by its authors under CC BY 4.0: https://creativecommons.org/licenses/by/4.0/License notice: https://github.com/reactjs/react.dev/blob/main/LICENSE-DOCS.mdIndependent AI-generated narration with adapted explanations and original workout examples. Not affiliated with or endorsed by React, Meta, or the source authors.
• 
  22 — Custom Hooks and Reusable Logic 14.09.2026 21mnt

  Chapter 22 of React by Ear — From JavaScript to Interactive Apps.Extract a coherent behavior into a custom Hook. Learn how reusable logic stays connected to React’s rendering model, and why two callers of the same Hook still have independent state.Sources and attributionReusing Logic with Custom Hooks — https://react.dev/learn/reusing-logic-with-custom-hooksAdapted from React documentation by its authors under CC BY 4.0: https://creativecommons.org/licenses/by/4.0/License notice: https://github.com/reactjs/react.dev/blob/main/LICENSE-DOCS.mdIndependent AI-generated narration with adapted explanations and original workout examples. Not affiliated with or endorsed by React, Meta, or the source authors.
• 
  21 — Effect Dependencies and Stale Closures 14.09.2026 21mnt

  Chapter 21 of React by Ear — From JavaScript to Interactive Apps.Understand reactive dependencies and why a closure can keep an older value. Use dependency-linter feedback, distinguish events from synchronization, and meet Effect Events without treating them as a way to hide dependencies.Sources and attributionRemoving Effect Dependencies — https://react.dev/learn/removing-effect-dependenciesSeparating Events from Effects — https://react.dev/learn/separating-events-from-effectsAdapted from React documentation by its authors under CC BY 4.0: https://creativecommons.org/licenses/by/4.0/License notice: https://github.com/reactjs/react.dev/blob/main/LICENSE-DOCS.mdIndependent AI-generated narration with adapted explanations and original workout examples. Not affiliated with or endorsed by React, Meta, or the source authors.
• 
  20 — When You Do Not Need an Effect 14.09.2026 19mnt

  Chapter 20 of React by Ear — From JavaScript to Interactive Apps.Simplify components by calculating derived values during rendering and keeping user-driven changes in event handlers. Learn when an Effect is useful and when it creates unnecessary duplicate state.Sources and attributionYou Might Not Need an Effect — https://react.dev/learn/you-might-not-need-an-effectAdapted from React documentation by its authors under CC BY 4.0: https://creativecommons.org/licenses/by/4.0/License notice: https://github.com/reactjs/react.dev/blob/main/LICENSE-DOCS.mdIndependent AI-generated narration with adapted explanations and original workout examples. Not affiliated with or endorsed by React, Meta, or the source authors.
• 
  18 — Refs and Working with the DOM 14.09.2026 43mnt

  Chapter 18 of React by Ear — From JavaScript to Interactive Apps.Learn when to use a mutable ref and when a value belongs in state. Retain information between renders and connect React to a real DOM input for practical tasks such as focus.Sources and attributionReferencing Values with Refs — https://react.dev/learn/referencing-values-with-refsManipulating the DOM with Refs — https://react.dev/learn/manipulating-the-dom-with-refsAdapted from React documentation by its authors under CC BY 4.0: https://creativecommons.org/licenses/by/4.0/License notice: https://github.com/reactjs/react.dev/blob/main/LICENSE-DOCS.mdIndependent AI-generated narration with adapted explanations and original workout examples. Not affiliated with or endorsed by React, Meta, or the source authors.
• 
  19 — Effects, Synchronization, and Cleanup 14.09.2026 35mnt

  Chapter 19 of React by Ear — From JavaScript to Interactive Apps.Connect a React component to an external system. Walk through Effect setup, cleanup, and re-synchronization, including the extra development checks that reveal missing cleanup.Sources and attributionSynchronizing with Effects — https://react.dev/learn/synchronizing-with-effectsLifecycle of Reactive Effects — https://react.dev/learn/lifecycle-of-reactive-effectsAdapted from React documentation by its authors under CC BY 4.0: https://creativecommons.org/licenses/by/4.0/License notice: https://github.com/reactjs/react.dev/blob/main/LICENSE-DOCS.mdIndependent AI-generated narration with adapted explanations and original workout examples. Not affiliated with or endorsed by React, Meta, or the source authors.
• 
  16 — Reducers and State Transitions 14.09.2026 41mnt

  Chapter 16 of React by Ear — From JavaScript to Interactive Apps.Bring scattered update logic into a pure reducer. Follow an action from dispatch to the next state, and use immutable updates to make workout-log transitions easier to understand.Sources and attributionExtracting State Logic into a Reducer — https://react.dev/learn/extracting-state-logic-into-a-reducerAdapted from React documentation by its authors under CC BY 4.0: https://creativecommons.org/licenses/by/4.0/License notice: https://github.com/reactjs/react.dev/blob/main/LICENSE-DOCS.mdIndependent AI-generated narration with adapted explanations and original workout examples. Not affiliated with or endorsed by React, Meta, or the source authors.
• 
  17 — Context and Shared App State 14.09.2026 17mnt

  Chapter 17 of React by Ear — From JavaScript to Interactive Apps.Explore how props, context, and reducers work together as an app grows. Learn where to place a provider, which values belong in shared state, and why context does not replace every other state-management choice.Sources and attributionPassing Data Deeply with Context — https://react.dev/learn/passing-data-deeply-with-contextScaling Up with Reducer and Context — https://react.dev/learn/scaling-up-with-reducer-and-contextAdapted from React documentation by its authors under CC BY 4.0: https://creativecommons.org/licenses/by/4.0/License notice: https://github.com/reactjs/react.dev/blob/main/LICENSE-DOCS.mdIndependent AI-generated narration with adapted explanations and original workout examples. Not affiliated with or endorsed by React, Meta, or the source authors.
• 
  15 — Preserving and Resetting State 11.09.2026 45mnt

  Chapter 15 of React by Ear — From JavaScript to Interactive Apps.See why an editor sometimes remembers its input and sometimes resets. Explore component position, type, and keys while switching between two workouts.Sources and attributionPreserving and Resetting State — https://react.dev/learn/preserving-and-resetting-stateAdapted from React documentation by its authors under CC BY 4.0: https://creativecommons.org/licenses/by/4.0/License notice: https://github.com/reactjs/react.dev/blob/main/LICENSE-DOCS.mdIndependent AI-generated narration with adapted explanations and original workout examples. Not affiliated with or endorsed by React, Meta, or the source authors.
• 
  14 — Sharing State Between Components 11.09.2026 29mnt

  Chapter 14 of React by Ear — From JavaScript to Interactive Apps.Keep a filter control and workout list in agreement. Move shared state into a common parent, pass values down, and use named callbacks so children can request changes.Sources and attributionSharing State Between Components — https://react.dev/learn/sharing-state-between-componentsAdapted from React documentation by its authors under CC BY 4.0: https://creativecommons.org/licenses/by/4.0/License notice: https://github.com/reactjs/react.dev/blob/main/LICENSE-DOCS.mdIndependent AI-generated narration with adapted explanations and original workout examples. Not affiliated with or endorsed by React, Meta, or the source authors.
• 
  13 — Choosing What Belongs in State 11.09.2026 47mnt

  Chapter 13 of React by Ear — From JavaScript to Interactive Apps.Choose the smallest useful state for a workout interface. Derive counts and filtered lists during rendering, track selection by ID, and avoid contradictory or duplicated values.Sources and attributionChoosing the State Structure — https://react.dev/learn/choosing-the-state-structureAdapted from React documentation by its authors under CC BY 4.0: https://creativecommons.org/licenses/by/4.0/License notice: https://github.com/reactjs/react.dev/blob/main/LICENSE-DOCS.mdIndependent AI-generated narration with adapted explanations and original workout examples. Not affiliated with or endorsed by React, Meta, or the source authors.
• 
  12 — Forms and Controlled Inputs 11.09.2026 41mnt

  Chapter 12 of React by Ear — From JavaScript to Interactive Apps.Follow a keystroke from a labeled input into state and back to the screen. Explore controlled fields, checkboxes, form submission, validation states, and deliberate conversion of numeric input.Sources and attributionReacting to Input with State — https://react.dev/learn/reacting-to-input-with-state<input> — https://react.dev/reference/react-dom/components/inputAdapted from React documentation by its authors under CC BY 4.0: https://creativecommons.org/licenses/by/4.0/License notice: https://github.com/reactjs/react.dev/blob/main/LICENSE-DOCS.mdIndependent AI-generated narration with adapted explanations and original workout examples. Not affiliated with or endorsed by React, Meta, or the source authors.
• 
  11 — Updating Objects and Arrays Safely 11.09.2026 42mnt

  Chapter 11 of React by Ear — From JavaScript to Interactive Apps.Update workout objects and arrays without mutating earlier state. Explore shallow copies, nested references, map, filter, and copying before sorting or reversing.Sources and attributionUpdating Objects in State — https://react.dev/learn/updating-objects-in-stateUpdating Arrays in State — https://react.dev/learn/updating-arrays-in-stateAdapted from React documentation by its authors under CC BY 4.0: https://creativecommons.org/licenses/by/4.0/License notice: https://github.com/reactjs/react.dev/blob/main/LICENSE-DOCS.mdIndependent AI-generated narration with adapted explanations and original workout examples. Not affiliated with or endorsed by React, Meta, or the source authors.
• 
  10 — Queued Updates and Batching 11.09.2026 42mnt

  Chapter 10 of React by Ear — From JavaScript to Interactive Apps.Walk through React’s update queue one step at a time. Compare repeated replacements with named updater functions, then predict the results of mixed updates to a completed-sets counter.Sources and attributionQueueing a Series of State Updates — https://react.dev/learn/queueing-a-series-of-state-updatesAdapted from React documentation by its authors under CC BY 4.0: https://creativecommons.org/licenses/by/4.0/License notice: https://github.com/reactjs/react.dev/blob/main/LICENSE-DOCS.mdIndependent AI-generated narration with adapted explanations and original workout examples. Not affiliated with or endorsed by React, Meta, or the source authors.
• 
  09 — State Snapshots and Closures 11.09.2026 30mnt

  Chapter 09 of React by Ear — From JavaScript to Interactive Apps.Trace which render owns an event handler and the values it remembers. Use a repetitions counter and delayed message to understand state snapshots, closures, and why a setter does not rewrite the current value.Sources and attributionState as a Snapshot — https://react.dev/learn/state-as-a-snapshotAdapted from React documentation by its authors under CC BY 4.0: https://creativecommons.org/licenses/by/4.0/License notice: https://github.com/reactjs/react.dev/blob/main/LICENSE-DOCS.mdIndependent AI-generated narration with adapted explanations and original workout examples. Not affiliated with or endorsed by React, Meta, or the source authors.
• 
  08 — Rendering, Committing, and Purity 11.09.2026 50mnt

  Chapter 08 of React by Ear — From JavaScript to Interactive Apps.Follow a state update through triggering, rendering, committing, and browser paint. Learn why rendering can leave the DOM unchanged and how pure components keep a workout summary predictable.Sources and attributionRender and Commit — https://react.dev/learn/render-and-commitKeeping Components Pure — https://react.dev/learn/keeping-components-pureAdapted from React documentation by its authors under CC BY 4.0: https://creativecommons.org/licenses/by/4.0/License notice: https://github.com/reactjs/react.dev/blob/main/LICENSE-DOCS.mdIndependent AI-generated narration with adapted explanations and original workout examples. Not affiliated with or endorsed by React, Meta, or the source authors.
• 
  07 — State and the Rules of Hooks 11.09.2026 37mnt

  Chapter 07 of React by Ear — From JavaScript to Interactive Apps.Give a workout counter memory. Learn how useState preserves values between renders, why separate component instances have independent state, and where ordinary Hooks may be called.Sources and attributionState: A Component's Memory — https://react.dev/learn/state-a-components-memoryRules of Hooks — https://react.dev/reference/rules/rules-of-hooksAdapted from React documentation by its authors under CC BY 4.0: https://creativecommons.org/licenses/by/4.0/License notice: https://github.com/reactjs/react.dev/blob/main/LICENSE-DOCS.mdIndependent AI-generated narration with adapted explanations and original workout examples. Not affiliated with or endorsed by React, Meta, or the source authors.
• 
  06 — Events and Callback Props 11.09.2026 39mnt

  Chapter 06 of React by Ear — From JavaScript to Interactive Apps.Follow a click from a workout button to a named event handler. Explore passing functions instead of calling them during rendering, callback props, event propagation, and preventing a form’s default behavior.Before listening: Components, props, functions, and conditional UI.Practice: Pass a named callback into an ExerciseCard and trace what runs when its button is clicked.Sources and attributionResponding to Events — https://react.dev/learn/responding-to-eventsAdapted from React documentation by its authors under CC BY 4.0: https://creativecommons.org/licenses/by/4.0/License notice: https://github.com/reactjs/react.dev/blob/main/LICENSE-DOCS.mdIndependent AI-generated narration with adapted explanations and original workout examples. Not affiliated with or endorsed by React, Meta, or the source authors.
• 
  05 — Conditional UI, Lists, and Keys 11.09.2026 58mnt

  Chapter 05 of React by Ear — From JavaScript to Interactive Apps.Turn a collection of workout data into the right rows on screen. Explore conditional rendering, filtering and mapping arrays, and stable keys that identify items among their siblings.Before listening: JSX, props, and JavaScript array methods.Practice: Render a filtered exercise list with stable IDs and a completion indicator.Sources and attributionConditional Rendering — https://react.dev/learn/conditional-renderingRendering Lists — https://react.dev/learn/rendering-listsAdapted from React documentation by its authors under CC BY 4.0: https://creativecommons.org/licenses/by/4.0/License notice: https://github.com/reactjs/react.dev/blob/main/LICENSE-DOCS.mdIndependent AI-generated narration with adapted explanations and original workout examples. Not affiliated with or endorsed by React, Meta, or the source authors.