Overview

• Components - building blocks of reusable HTML code

• JSX - React's JS wrapper to build components with HTML

• Props - pass data around in you app, commonly function parameters

• Virtual DOM - with DOM updates, paints the whole thing then passes to React to process what changes need to be made on the real DOM. Speed!

    ReactDOM.render(what, where);
    ReactDOM.render(<h1>Hello World!</h1>, document.getElementById("root"));
    ReactDOM.render(<div><h1>hi, </h1><span>pohead</span></div>, document.getElementById("root"));
                    

(first parameter can only accept 1 component, so wrap them in a div or empty tag <>)

React Basics

When writing JSX, remember that class turns into className

Use curly braces {} to reference variables within JSX: <button onClick={handleClick}></button>

Hooks: useState()

A good way to track state in a functional component without needing to use class-based components (which are becoming obsolete)

useState('default') takes in a default value as its parameter

It returns an array with two entries: [theVariableToTrack, functionThatUpdatesTheState]

const [query, setQuery] = useState(''); uses array destructing to set count to the tracked variable, and a function setCount that will update the count like so: setCount(2)

<input type="text" value={query} onChange={e => setQuery(e.target.value)} />
If you set the value of a form field, you must provide an onChange or else it will be read-only. For our input to reflect the state, we would set value to the state query and the onChange to a function that uses setQuery(e.target.value)

React.memo

A higher-order component, which is a function that takes a component and returns a new component. As opposed to a regular component, which transforms props into HTML UI. Uses memoization.

Checks for prop changes to signal whether to render or reuse the last rendered result.

    const MyComponent = React.memo(function MyComponent(props) {
        /* given the same props, will not re-render and will just give you the previous result */
    });
                

useCallback()

Returns the first instance of the function provided, given an array of dependencies. Stores a function that you don't want to render unnecessarily if the function is the same. Uses memoization.

    const eventHandler = useCallback(() => doSomething(a), [a]);
    return <App onClick = {eventHandler}/>
                

If the same value for a is passed more than once, doSomething does not re-render. eventHandler is set to the same as the first time doSomething(a)'s value was (the function itself, not the value).

useMemo()

Returns the result of the first instance of the function provided, given an array of dependencies. Recomputes the memoized value when one of the dependencies has changed. On every render, the function passed to useMemo runs. Uses memoization.

    const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);
                

If the same value for a is passed more than once, doSomething does not re-render. eventHandler is set to the same as the first time doSomething(a)'s value was (the function itself, not the value).

 
    useCallback(() => console.log('useCallback')) // return the function
    useMemo(() => () => console.log('useMemo')) // return the result of the function
                

These are equivalent because useMemo returns the result of the function, which is a function.