useState and useEffect

import React from "react";
import { useState, useEffect } from "react";

function WindowSizeList({ url }) {
    const [windowWidth, setWindowWidth] = useState(window.innerWidth)
    const [items, setItems] = useState([])

    const updateWindowWidth = () => {
        setWindowWidth(window.innerWidth)
    }

    useEffect(() => {
        setItems(["abcd"])
    }, [url])

    useEffect(() => {
        console.log('This is my side effect')
        window.addEventListener('resize', updateWindowWidth)
        return () => {
            console.log('This is my clean up')  
            window.removeEventListener('resize', updateWindowWidth)
        }
    }, [])

    return (
        <>
            <div>Window Width: {windowWidth}</div>
            {items.map(item => {
                return <div key={item}>{item}</div>
            })}
        </>
    )
}

export default WindowSizeList

The first useState hook sets up a state variable called windowWidth and initializes it to the current width of the window using the window.innerWidth property. The second useState hook initializes an empty array called items.

The updateWindowWidth function is used to update the windowWidth state variable whenever the window is resized. This function is called by an event listener attached to the window in the second useEffect hook.

The first useEffect hook sets the items state variable to an array containing a single string "abcd". This effect is only executed when the url prop changes.

The second useEffect hook is responsible for attaching and removing the event listener for window resizing. The effect function adds an event listener to the resize event of the window, and returns a cleanup function that removes the event listener when the component unmounts. The [] dependency array passed as the second argument to this useEffect hook ensures that the effect is only executed once when the component mounts.

Finally, the component returns a JSX fragment that renders the current window width and a list of items, with each item rendered as a <div> element with a unique key prop.

Overall, this component demonstrates how the useState and useEffect hooks can be used to manage state and side effects in a React component. It also shows how to attach and remove event listeners using the useEffect hook.

---

useContext

import React from "react"
import { useState, useContext } from "react"
//context
const ThemeContext = React.createContext()

function App() {
    const [theme, setTheme] = useState('dark')

    return (
        // provider with obj with props theme and setTheme
        <ThemeContext.Provider value={{ theme, setTheme }}>
            <ChildComponent />
        </ThemeContext.Provider>
    )
}

function ChildComponent() {
    return <GrandChildComponent />
}

function GrandChildComponent() {
    const { theme, setTheme } = useContext(ThemeContext)

    return (
        <>
            <div>The theme is {theme}</div>
            <button onClick={() => setTheme('light')}>
                Change To Light Theme
            </button>
        </>
    )
}

The first step is to create a context object using the createContext() function from the React library. This creates a new context object that can be used to pass data down to child components.

The App component is the parent component and contains the state variable "theme" which is initialized to 'dark' using the useState() hook from the React library. The App component also provides a child component, ChildComponent, with access to the theme state by wrapping it in the ThemeContext.Provider component.

The ChildComponent is a simple component that renders a GrandChildComponent.

The GrandChildComponent uses the useContext() hook from the React library to access the "theme" and "setTheme" variables from the context. It then renders a div that displays the current theme value and a button that changes the theme to "light" when clicked.

Overall, this code shows how to use the React Context API to share state between components without the need for passing props down the component tree. It also demonstrates the power of the useContext() hook to access context values within child components.