Skip to content

React

Components

import React from "react";

// The interface should follow the name of the component, with "Props" on the end, e.g. "{ComponentName}Props"
interface AppProps {
    message: string;
    // If a component accepts children as a prop, specify the children here, otherwise this can be left out
    children: React.ReactNode;
}

// The way components are defined have changed a little in React 18, this replaces the old method that used React.FC
// Usually you want your component to be the default export of the file
export default function App({ message, children }: AppProps) {
    return <div>{children}</div>;
}

Notes:

  • Use React.ReactNode for component types (such as children prop)
  • Most of the time you’ll want a default export in your file, the name of the default exported component should match the name of the file

Hooks

Any function that starts with use is called a Hook, they have some rules:

  • Can only be used at the top level
    • Can’t be used inside loops, conditions or nested functions
    • Hooks need to be called in the same order each time a component renders
  • Only call hooks from React functions, namely:
    • React function components
    • Custom hooks

Use the [eslint-plugin-react-hooks](https://www.npmjs.com/package/eslint-plugin-react-hooks) eslint plugin to enforce the rules of hooks

Common Patterns

Callback Ref

useRefs doesn’t notify you of when its content changes, if you want this you’ll have to use a callback ref, see the example below

function MeasureExample() {
    const [height, setHeight] = useState(0);

    // The callback ref
    const measuredRef: React.RefCallback<HTMLHeadingElement> = useCallback(
        (node: HTMLHeadingElement) => {
            if (node !== null) {
                setHeight(node.getBoundingClientRect().height);
            }
        },
        []
    );

    return (
        <>
            <h1 ref={measuredRef}>Hello, world</h1>
            <h2>The above header is {Math.round(height)}px tall</h2>
        </>
    );
}

Fast Refresh

pnpm i -D @pmmmwh/react-refresh-webpack-plugin react-refresh
Last update: August 12, 2023
Created: June 3, 2023