
Next JS 13 has dropped with a tonne of great features, one being the new  `@next/font/google` package which lets you self-host Google fonts, which means that Google can't track your users if you use one of their fonts. This package has also been optimised to reduce any font flickering while your user is waiting for your web font to load, the fallback font will be a system font most closely matched to your web font. Praise.

Your imported font will have a bit of a random name (e.g. "__Megrim_cb9663"), and because of that, you can't reference it directly in your CSS (for example, if you only want to use the imported font for headings). This also leads to the question of how to use multiple Google fonts on your site... The Next JS beta docs show how to set the site-wide font to a Google font, and it seems that the only way to use additional Google fonts would be to create new React components for them, which would be really annoying to have to do for all your `h1` ... `h6` elements etc.

I've discovered that the font directive allows you to create a CSS variable for it, and that's the key that unlocked this puzzle for me.

```tsx
// layout.tsx
import './globals.css'
import {Megrim, Archivo_Narrow} from '@next/font/google';

const specialFont = Megrim({
    subsets: ["latin"],
    variable: "--font-special",
    weight: "400",
})

const regularFont = Archivo_Narrow({
    subsets: ["latin"],
    variable: "--font-regular",
    weight: "400",
})

export default function RootLayout({
                                       children,
                                   }: {
    children: React.ReactNode
}) {
    return (
        <html lang="en">
        <head/>
        <body className={`${specialFont.variable} ${regularFont.variable}`}>{children}</body>
        </html>
    )
}
```

```css
/* globals.css */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-special);
}

body {
    font-family: var(--font-regular);
}
```


Fonts in Next JS 13



The observer pattern is a mechanism that lets you notify multiple *subscribers* when something happens.

```jsx
// observable.js

const observers = [];

export default Object.freeze({
  notify: (data) => observers.forEach((observer) => observer(data)),
  subscribe: (func) => observers.push(func),
  unsubscribe: (func) => {
    [...observers].forEach((observer, index) => {
      if (observer === func) {
        observers.splice(index, 1);
      }
    });
  },
});
```

And this is how something can subscribe to it:

```jsx
import Observable from "./observable";

function logger(data) {
  console.log(`${Date.now()} ${data}`);
}

Observable.subscribe(logger);
```

Finally, this is how the subscriber gets notified:

```jsx
import Observable from "./observable";

document.getElementById("my-button").addEventListener("click", () => {
  Observable.notify("Clicked!"); // Notifies all subscribed observers
});
```

You could use this pattern for something like o triggering calls to all of your analytics backends. Check
out [this example on StackBlitz](https://stackblitz.com/edit/js-mg21bk?file=index.js).


The observer pattern in JS


## Create

`object.create(null)` will make an object **without** a prototype. After you've created it, you can add props to it:

```tsx
const obj1 = Object.create(null)
obj1.make = "Ford"
obj1.model = "Ka"

obj1.toString() // obj1.toString is not a function
```

Conversely, if you want an object to inherit its prototype from somewhere else, then you can do this:

```tsx
const obj2 = Object.create(obj1)
obj2.make // "Ford"
```

## Freeze
`object.freeze` will stop an object from being modified

```tsx
const obj3 = {make: "VW", model: "Golf R"};
Object.freeze(obj3);
obj3.year = "1999"; // Cannot add property year, object is not extensible
obj3.make = "Ford"; // Cannot assign to read only property 'make' of object
```

## Clone
`structuredClone` creates a deep clone of a given value. This is a global available on the `window` and in NodeJS. The
introduction of this API means that you don’t have to use lodash’s `cloneDeep`
method, but note
that [some things don’t work with structured clone](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Structured_clone_algorithm#things_that_dont_work_with_structured_clone)
, of particular note is:

- Function objects
- DOM nodes
- The prototype chain is not walked or duplicated

```tsx
const obj1 = {make: "VW", model: "Golf R", engine: {size: 2}};
const obj2 = {...obj1};

obj2.engine.size = 3; // 3. We've edited the OG object, which we didn't want to do.
```

Using `structuredClone` instead:

```tsx
const obj1 = {make: "VW", model: "Golf R", engine: {size: 2}};
const obj2 = structuredClone(obj1);

obj2.engine.size = 3;
console.log(obj1.engine.size); // 2 ✌️
```
## Accessing keys

If you're using TypeScript, then you'll use `in` every day:
```jsx
if (myKey in myObj) {
    // do stuff
}
```

### Optional chaining
This is a nice quality-of-life feature that lets you do away with long, speculative checks of
property existence on objects.

```tsx
const baz = foo?.bar?.baz

// if you can't use dot notation to access the prop, you can do this instead
const baz2 = foo?.bar?.["baz 2"]
```

You can also use optional chaining to execute a function if it exists on the object. If the function doesn’t exist, it
will resolve to `undefined` (like it would for a regular property).

```tsx
const width = house?.bedroom?.getWidth?.()
```

### TypeScript

Sometimes I will declare the type of an object, using the `Record` type, and I need to initialise the object as an empty
object (which, in my mind at least, seems valid). TypeScript doesn’t allow this, so in this instance use `Partial` too.
e.g.

```tsx
export type ColumnSearchValue = string | undefined;
export type ColumnSearches<RowRec = RowRecord> = Record<DataTableColumn<RowRec>['id'],
    ColumnSearchValue>;

const relevantColumnSearches: Partial<ColumnSearches<T>> = {};
```

## lodash iterator alternatives

rather than pulling in lodash’s `_.forEach`, `_.map`, `_.filter` etc. methods, use `Object.entries()` instead. i.e.:

- `Object.entries(myObj).forEach(([key, value])=>{ ... })`
- `Object.entries(myObj).map(([key, value])=>{ ... })`
- `Object.entries(myObj).filter(([key, value])=>{ ... })`


JavaScript objects

A reference to save myself from looking these up in the official docs...

## useTransition

Sometimes, updating a state value can cause really expensive re-renders (e.g. you type a search term into an input box
and this filters the rows in a large, complicated table).

Wrap state updates with `startTransition` (see example) if they are low priority. Other state updates in your app that
are regular priority (e.g. updating the text value in an input) will not have to wait for this re-render to complete.

```tsx
const [isPending, startTransition] = useTransition();
const [items, filteredItems] = useState(0);

function onSearchChanged() {
    startTransition(() => {
        const newItems = filterNewItems(searchTerm)

        // changing items will cause an expensive re-render
        // which would block all the other stuff on the page from
        // re-rendering
        setItems(newItems);
    })
}

// ...
return //...
```

## Portals

Portals enable you to render to a DOM element that is outside of your React tree. Needing this is rare but is useful for
stuff like creating full-screen modals. More [details in the proper docs](https://reactjs.org/docs/portals.html).

## Context

`useContext` to avoid prop-drilling. A neat trick is to use a `useState` variable as the item that the context holds.
This way you have a getter and a setter for the context. e.g.

```tsx
const SearchContext = React.createContext(["", (str) => str]);

const App: FC = () => {
    const searchTermState = useState("");

    return (
        <SearchContext.Provider value={searchTermState}>
            <div>
                <input
                    value={searchTermState[0]} // getter
                    onChange={(e) => {
                        const value = e.target.value;
                        // setter
                        searchTermState[1](value);
                    }}
                />
                <ItemList/>
            </div>
        </SearchContext.Provider>
    );
};

function ItemList(): React.Element {
    const [search] = useContext(SearchContext);
    // do stuff with the search variable

    return (
        <div>
            foo bar
        </div>
    );
}
```

## Render function

When you want the ‘wrapping’ component to pass some props to your actual component. It’s basically a way of creating a
Higher Order Component.

```tsx
function Moon(props) {
    const phase = "waxing gibous"
    return (
        <div>
            {props.render({phase})}
        </div>
    )
}

function App() {
    return (
        <Moon
            render={(phase) => {
                <span>The phase is {phase}</span>
            }}
        />
    )
}
```

## useMemo

Incredibly useful function to save unnecessary CPU
cycles ([see working example on code sandbox](https://codesandbox.io/s/usememo-example-hrdgs8?file=/src/App.tsx)).

```tsx
export default function App() {
    const [counter, setCounter] = useState(0);

    /* 
      Bad, each render (each time the button is clicked)
      will cause this function to be called
    */
    const magicNumber = expensiveOperation();

    /*
      Good, as long as the dependencies don't change (and
      we don't have anything in the dependency array) then this function
      is not called.
    */
    const magicNumber2 = useMemo(() => expensiveOperation(), []);

    return (
        <button
            onClick={() => {
                setCounter(counter + 1);
            }}
        >
            Click me!
        </button>
    );
}
```

## useCallback

Very similar to `useMemo`, but used when you need to make sure that a function is stable between renders. For example,
if you are passing a function to a child component, you don’t want it changing under you as that would cause a re-render
of the child component (i.e. a change of props would be detected)
. [See a working example in this code sandbox](https://codesandbox.io/s/usecallback-example-r1n4wq?file=/src/App.tsx).

```tsx
export default function App() {
    const [counter1, setCounter1] = useState(0);
    const [counter2, setCounter2] = useState(0);

    // bad
    const clickHandler1 = () => {
        setCounter1(counter1 + 1);
    };

    // good
    const clickHandler2 = useCallback(() => {
        setCounter2(counter2 + 1);
    }, [counter2]);

    return (
        <>
            <SpecialButton
                name="Naive"
                count={counter1}
                onClick={clickHandler1}
            />
            <SpecialButton
                name="useCallback"
                count={counter2}
                onClick={clickHandler2}
            />
        </>
    );
}
```

## useLayoutEffect

`useEffect` runs *after* React has rendered your component. Occasionally you need to make sure that an effect runs *
before* a render (and if you need something to happen before the initial render, you should use this hook (equivalent
to `componentWillMount` in class-based land)).# React Patterns



React bits

Bummed that you can’t treeshake lodash away? Well you can use jscodeshift to run a codemod which will explicitly import all of the lodash functions that you're using.


I've taken the codemod 
from [blog.laurenashpole.com](https://blog.laurenashpole.com/post/651822910948900864/optimizing-lodash-imports-with-jscodeshift):

```js
export default (fileInfo, api) => {
  const j = api.jscodeshift;
  const root = j(fileInfo.source);
  let specifiers = [];

  root
    .find(j.ImportDeclaration, isLodashImport)
    .forEach((path) => specifiers.push(...path.node.specifiers.map((specifier) => specifier.local.name)))
    .remove();

  root
    .find(j.CallExpression, isLodashExpression)
    .forEach((path) => specifiers.push(path.node.callee.property.name))
    .replaceWith((path) => replaceExpression(path, j));

  if (specifiers.length) {
    cleanSpecifiers(specifiers).forEach((specifier) => {
      root.find(j.Declaration).at(0).get()
        .insertBefore(createImport(j, specifier));
    });
  }

  return root.toSource();
};

function isLodashImport (node) {
  return node.source.value.startsWith('lodash');
}

function isLodashExpression (node) {
  return node.callee.type === 'MemberExpression' && node.callee.object && node.callee.object.name === '_';
}

function replaceExpression (path, j) {
  return j.callExpression(j.identifier(path.node.callee.property.name), path.node.arguments);
}

function cleanSpecifiers (specifiers) {
  return specifiers.filter((specifier, i) => {
    return specifier !== '_' && specifiers.indexOf(specifier) === i;
  });
}

function createImport (j, specifier) {
  return j.importDeclaration(
    [j.importDefaultSpecifier(j.identifier(specifier))],
    j.stringLiteral(`lodash/${specifier}`)
  );
}
```

Name this file `lodash-import-codemod.js` and put it in the root of your project (no need to commit it to git, as you're just using this as a tool to refactor some code). Then run
the following to do the code mod on all your `.tsx` files:

```js
npx jscodeshift -t ./lodash-import-codemod.js --extensions=tsx --parser=tsx  .
```

and then run this to do it on all your TypeScript files:

```js
npx jscodeshift -t ./lodash-import-codemod.js --extensions=ts --parser=ts  .
```

Just be aware that this could result in some name collisions. For example, if you have a variable in your code
named `groupBy` and the file also uses the `_.groupBy` method, after running the codemod, you will also import
the `groupBy` function from lodash, so you’ll either need to change the name that you use to import it, or just rename
your constant to something else.
