// Import the useState Hook from React
import { useState } from 'react'

// Define a functional component named Counter
function Counter() {

 // useState(0):
 // - Creates a state variable called "count"
 // - Creates a function called "setCount" to update "count"
 // - Initializes count with the value 0
 const [count, setCount] = useState(0)

 // Return the JSX (UI) that will be rendered
 return (
 <div>
 {/* Display the current value of count */}
 <p>You clicked {count} times</p>

 {/* 
 When the button is clicked:
 1. Read the current value of count
 2. Add 1 to it
 3. Update the state using setCount()
 4. React re-renders the component with the new value
 */}
 <button onClick={() => setCount(count + 1)}>
 {/* Text shown on the button */}
 Click me
 </button>
 </div>
 )
}

// Export the component so it can be imported into other files
export default Counter

// Import the useState and useEffect Hooks from React
import { useState, useEffect } from 'react'

// Define a functional component named WeatherApp
function WeatherApp() {

 // Create a state variable named "weather"
 // Initial value is null because no weather data has been loaded yet
 const [weather, setWeather] = useState(null)

 // useEffect runs after the component renders
 useEffect(() => {

 // Fetch weather data from the API
 fetch('https://api.weather.com/today')

 // Convert the response into JSON format
 .then(res => res.json())

 // Store the fetched data in the weather state
 .then(data => setWeather(data))

 }, []) // Empty dependency array [] means:
 // Run this effect only once when the component first mounts

 // If weather is still null, show a loading message
 if (!weather) {
 return <p>Loading...</p>
 }

 // Once weather data is available, display the temperature
 return (
 <p>It is {weather.temp}°C today</p>
 )
}

// Export the component so it can be used in other files
export default WeatherApp

import { createContext, useContext, useState } from 'react'

// Create a Context object (shared data container)
const ThemeContext = createContext()

function App() {
 // State to store the current theme
 const [theme, setTheme] = useState('light')

 return (
 // Provide theme and setTheme to all child components
 <ThemeContext.Provider value={{ theme, setTheme }}>
 <Navbar />
 <Page />
 </ThemeContext.Provider>
 )
}

function Navbar() {
 // Consume (read) values from ThemeContext
 const { theme, setTheme } = useContext(ThemeContext)

 return (
 // Toggle between 'light' and 'dark' themes
 <button onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}>
 Toggle theme: {theme}
 </button>
 )
}

import { useRef } from 'react'

function SearchBar() {
 // Create a ref object. Initially, current is null.
 const inputRef = useRef(null)

 function handleClick() {
 // Access the actual <input> DOM element and place the cursor inside it
 inputRef.current.focus()
 }

 return (
 <div>
 {/* Attach the ref to the input DOM element */}
 <input ref={inputRef} placeholder="Search..." />

 {/* When clicked, call handleClick to focus the input */}
 <button onClick={handleClick}>Focus search</button>
 </div>
 )
}

import { useState, useMemo } from 'react'

function ProductList({ products }) {
 // State to store the user's search text
 const [search, setSearch] = useState('')

 // Memoize the filtered list and recalculate it
 // only when products or search changes
 const filtered = useMemo(() => {
 return products.filter(p =>
 p.name.toLowerCase().includes(search.toLowerCase())
 )
 }, [products, search])

 return (
 <div>
 {/* Controlled input: value comes from state and updates state on typing */}
 <input
 value={search}
 onChange={e => setSearch(e.target.value)}
 />

 {/* Render only the filtered products */}
 {filtered.map(p => (
 <p key={p.id}>{p.name}</p>
 ))}
 </div>
 )
}

import { useCallback } from 'react'

function Parent() {
 // Memoize the function and keep the same function reference
 // between renders unless dependencies change
 const handleClick = useCallback(() => {
 console.log('button clicked!')
 }, []) // [] = create the function once and reuse it on every render

 // Pass the memoized function to the child component
 return <ExpensiveButton onClick={handleClick} />
}