Gain insights into React from basics to advanced, explore its ecosystem, and delve into best practices and the latest straightforward methods for efficient use.

React Deep Dive by Manuel Bieh & Sibylle Lancaster_468 x 60.png

data.tar.gz

reactdeepdive

reactdeepdiveportal

reactdeepdiveflow

ReactDeepDiveNodeAPI

ReactDeepDiveNodeAPI_Portal

The primary goal of this course is to give you an excellent introduction to React and its ecosystem, tackle advanced features, and teach you as many best practices as possible. Furthermore, this course digs deeper into the most popular, latest, and straight forward ways to use React.

React Deep Dive: From Beginner to Advanced


# The issue

React massively optimizes **Context** under the hood to avoid unnecessary re-renders of components or avoid lengthy component hierarchies. Comparing the old value of the Context Provider with the new one, **Consumer components** are only re-rendered if the value in the **Context Provider** has changed.

While this may sound, it creates a minor issue that we need to look out for in our React app. Using it within the `render()` method concerns the Context Provider whose value is recreated on the fly if we use it within the `render()` method. Creating the Context value outside of the `render()` method is recommended and passing a **reference** to the value instead of a **newly created value**.

## Example problem

Here is an example which you should NOT recreate:

```jsx
class App extends React.Component {
    state = {
        color: 'red',
    };

    render() {
        return (
            <Provider value={{ color: this.state.color }}>
                <MoreComponents />
            </Provider>
        );
    }
}
```

We are creating a new object `{color: this.state.color}` with each call of the `render()` method. All Consumer components would re-render because React only checks if the reference of the `value` in the current `render()` is the same as the reference in the previous `render()` call, which is never the case as a new object is created on the fly each time.

## Example solution
However, we can transform the above example to avoid this situation and make sure that
React's performance algorithm can get to work:

```jsx
class App extends React.Component {
    state = {
        color: 'red',
    };

    render() {
        return (
            <Provider value={this.state}>
                <MoreComponents />
            </Provider>
        );
    }
}
```

In this example, we merely pass a *reference* to the `state` object of the component. Since this remains intact during component re-rendering, it does not trigger a re-render if the content of the state does not change.

Introduction

Introduction to ES2015+

JSX – an Introduction

Rendering of Elements and Components in React

State and Lifecycle Methods

Event Handling

Forms

Lists, Fragments, and Conditional Rendering

CSS and Styling

Higher Order Components

Functions as a Child and Render Props

Context API

Refs

Error Boundaries

Portals

Code Splitting

Typechecking with PropTypes, Flow, and TypeScript

React Hooks – an Introduction

Hooks in Action

The Hooks API

Routing in React

State Management

Internationalization

Conclusion

Appendix

Performance Issues

The issue