# 03.28.2022 - React/Memoization with React.memo

[Memoization](https://en.wikipedia.org/wiki/Memoization) is the technique to let an expensive function return the cached value if all of its arguments remain unchanged.

When a React component is wrapped inside a [`React.memo`](https://reactjs.org/docs/react-api.html#reactmemo), the render result of that component will be memoized. If you pass the same props, React will skip re-rendering that component.

Let's take a look at this example: We create a component `Book` that takes a string as `title`. And an _"Update"_ button.

```typescript
const BookComponent = ({ title }) => {
    console.log("Render book with ", title);
    return <div>{title}</div>;
};
const Book = BookComponent;

const DemoApp = () => {
    const [title, setTitle] = React.useState("Hello, World!");
    const update = () => {
        setTitle("Hello, World!");
    };
    return (
    <div>
        <Book title={title} />
        <button onClick={update}>Update</button>
    </div>
    );
};
```

Every time you click the _"Update"_ button, we update the `title` state, the `Book` component will always be re-rendered, even if the `title` value remains the same.

To keep the `Book` component from being re-rendered, we can wrap it with `React.memo`:

```typescript
const Book = React.memo(BookComponent);
```

Now, when updating the state, the `BookComponent` will be called, but the input props have been memoized before, so React will skip rendering.

By default, `React.memo` only do a shallow comparison on the props, this means, if the input prop is an object, the memoization will be broken.

For example, instead of taking a `title` string, we change the `BookComponent` to take an object instead:

```typescript
const BookComponent = ({ book: { title } }) => {
    console.log("Render book with ", book.title);
    return <div>{book.title}</div>;
};
const Book = React.memo(BookComponent);

const DemoApp = () => {
    const [data, setData] = React.useState({
        book: {
            title: "Hello, World!"
        }
    });
    const update = () => {
        setData({
            book: {
                title: "Hello, World!"
            }
        });
    };
    return (
    <div>
        <Book data={book} />
        <button onClick={update}>Update</button>
    </div>
    );
};
```

Clicking _"Update"_ will always result in a re-render. In this case, we can provide `React.memo` a custom comparison function:

```typescript
const compare = (prevProps, currentProps) => {
    return prevProps.book.title === currentProps.book.title;
};

const Book = React.memo(BookComponent, compare);
```

Now, memoization will work again.

It's a best practice to only use `React.memo` on complex components or components that do not require an update when props change.

Memorization with React.memo

# 03.05.2022 - React/How React's Diffing Algorithm Works

If you are busy, here is the **TL; DR**:

**React Reconciliation** is the tree diffing algorithm that React used to update your application's DOM tree between renders. The [existing algorithms](https://grfia.dlsi.ua.es/ml/algorithms/references/editsurvey_bille.pdf) do this in **O(n^3)** time, with **n** is the number of nodes in the tree, which is not great.

React implements an **O(n)** time diffing algorithm based on some assumptions:

- Two elements of different types will produce different trees
- The developer can use the `key` prop to hint that an element is stable between trees

---

**A longer explanation**:

Every time a component updates (on state or prop changes, insert or delete a children node,...), the `render()` function will be called, the output is a **render tree** containing all the DOM elements created by your component and its children.

If React just replace one render tree with another on every render, it would be extremely slow, so it needs to have some sort of diffing algorithm to compare and generate the minimum number of operations to transform one render tree to another.

The way the algorithm works is:

- If two elements are the same type, React will check each of the attributes and styles, only update what changed. The algorithm continues checking all the component's children recursively.

  For example, if element A only changes the color attribute, React will only update the color, everything else remains the same:

  ![](_meta/react-diff-same-type.png)
  
- If two elements have different types, all old DOM nodes are destroyed, the `componentWillUnmount()` method will be called. Then, a new DOM nodes are inserted, the `UNSAFE_componentWillMount()` and `componentDidMount()` will be called.

  In the following example, the two render trees are identical until node D, which gets transformed into node E. Although the subtree of D and E are the same, React will still replace the whole subtree D to E.

  ![](_meta/react-diff.png)

---

The reconciliation algorithm cannot tell the difference between the two render trees if the child elements are just re-ordered. For example, if you insert a new element in the middle of the list, the algorithm will see every element from the inserted position as an updated node:

![](_meta/react-diff-reorder.png)

In this case, adding a `key` property into each element will help the algorithm determine if a node is unchanged or not during the update.

![](_meta/react-diff-key.png)

Keys need to be unique in the same subtree and should be stable and predictable, for example, don't use random ID. Be cautious if you use an array index for the key, otherwise, you risk the same re-ordering problem.

---

It's important to note that, the current algorithm will not try to match two subtrees if they are of different component types, even if they produce the same DOM tree.

```typescript
const A = () => <div>hello</div>;
const B = () => <div>hello</div>;

const App = (props) => (
    props.isA ? <A/> : <B/>
);
```

In the above example, components A and B render to the same HTML content. But changing the property `isA` will always replace the whole App's DOM tree because they are two different components.

**Reference:** https://reactjs.org/docs/reconciliation.html


How React Diffing Algorithm Works

# 01.03.2022 - React/Render a component to any DOM node with React Portals

In React, you can mount a component into any DOM node instead of just the current parent component, with the help of `ReactDOM.createPortal([content], [node] )`.

It's very helpful when working with modal dialogs or tooltips.

For example, the following `MooContainer` component will create a portal in `document.body`, with the content is the `MooContent` component:

```javascript
const MooContent = () => <div>Moooooo!</div>;
const MooContainer = () => {
  return ReactDOM.createPortal(<MooContent />, document.body);
};
```

Regardless of where we will mount `MooContainer`, the `MooContent` will always be rendered in `body`:

```javascript
const App = () => {
  return <div>
    Hello
    <MooContainer />
  </div>;
};
```

Output:

```html
<body>
  <div id="root">
    <div>Hello</div>
  </div>
  <div>Moooooo!</div>
</body>
```

Using this method, only the HTML structure of the document will be affected and there are no changes in terms of the React's component structure, so, the hierarchy of your component should still be:

```
 App
  ├─ div
  └─ MooContainer
      └─ MooContent
```

Event bubbling will respect this hierarchy, from `MooContent` to `MooContainer` then `App`.

Accessibility wise, since `MooContent` is rendered under `document.body`, keyboard navigation or screen reader's flow will also be affected by this HTML structure, so make sure you handled them properly by yourself.

