Week 5

State with useState

Render and commit lifecycle

Event Handling

Forms

Practice

Assignment

• Teachers

Front end Track

Week 5 Overview

Up until now, your React components have been static: they render data, but nothing changes when a user interacts with them. This week changes that. You'll learn how React handles user interactions through events, how components remember and update data over time using state, and what React is actually doing under the hood when something on screen changes. These are the building blocks every interactive UI is made of, and you'll use them in every component you write from here on.

You’ll start with state and useState — React's mechanism for giving components memory — and learn how to update state correctly, including why mutating arrays and objects directly causes subtle bugs that are hard to trace. You'll also spend time understanding the render cycle: how React decides when to re-render, what "state as a snapshot" means in practice, and why reading state right after calling a setter gives you the old value. From there you'll move into event handling: how to attach functions to user actions like clicks, keystrokes, and form submissions, and how to use the event object to read input values and prevent default browser behaviour.

The week ends with forms. You'll learn the difference between controlled and uncontrolled inputs, how to manage all your form fields in a single state object with one shared handler, and how to implement inline validation with accessible error messages. By the end of the week, you'll have the complete picture: events trigger handlers, handlers update state, state changes cause re-renders, and forms are just controlled inputs wired together.

Learning Goals

• Use useState to add reactive memory to a component, and update state correctly for primitives, objects, and arrays without direct mutation
• Explain React's render and commit lifecycle, including why state behaves like a snapshot and how batching affects multiple updates in one handler
• Identify when a value should be stored in state versus derived from existing state during render
• Attach event handlers to JSX elements using onClick, onChange, and onSubmit, and use the event object to read input values and prevent default browser behaviour
• Build a controlled form in React with a shared change handler, submit validation, and inline error messages

The HackYourFuture curriculum is licensed under CC BY-NC-SA 4.0 *https://hackyourfuture.net/*

Built with ❤️ by the HackYourFuture community · Thank you, contributors

Found a mistake or have a suggestion? Let us know in the feedback form.