Unsplash<\/a><\/figcaption><\/figure>\n3. Handling Events<\/h4>\n
React uses camelCase event names and passes functions, not strings:<\/p>\n
<button onClick={handleClick}>Click me<\/button>\n<input onChange={(e) => setName(e.target.value)} \/>\n<\/code><\/pre>\nCommon events: onClick<\/code>, onChange<\/code>, onSubmit<\/code>, onKeyDown<\/code>. Prevent default form behavior with e.preventDefault()<\/code> inside onSubmit<\/code>.<\/p>\n4. Functional State Updates<\/h4>\n
When the next state depends on the previous state, pass a function to the setter:<\/p>\n
setCount((prev) => prev + 1);\n<\/code><\/pre>\nThis avoids stale closures when multiple updates happen in one event or in async code \u2014 a common react usestate tutorial<\/strong> gotcha.<\/p>\n5. Multiple State Variables<\/h4>\n
Split unrelated data into separate useState<\/code> calls:<\/p>\nconst [likes, setLikes] = useState(0);\nconst [liked, setLiked] = useState(false);\n<\/code><\/pre>\nFor complex objects, you can use one state object, but prefer separate variables until you need to group them (or use useReducer<\/code> in advanced apps).<\/p>\nCreate src\/LikeButton.jsx<\/code>:<\/p>\nimport { useState } from 'react';\n\nfunction LikeButton({ initialLikes = 0 }) {\n const [likes, setLikes] = useState(initialLikes);\n const [liked, setLiked] = useState(false);\n\n function toggleLike() {\n setLiked((prev) => !prev);\n setLikes((prev) => (liked ? prev - 1 : prev + 1));\n }\n\n return (\n <button\n onClick={toggleLike}\n style={{\n padding: '0.5rem 1rem',\n borderRadius: '6px',\n border: '1px solid #e2e8f0',\n background: liked ? '#eff6ff' : '#fff',\n cursor: 'pointer',\n }}\n >\n {liked ? '\u2665' : '\u2661'} {likes} likes\n <\/button>\n );\n}\n\nexport default LikeButton;\n<\/code><\/pre>\nWire it in App.jsx<\/code> alongside your Lesson 3 components. Run npm run dev<\/code> and confirm the count updates on each click.<\/p>\n