Restructure the project

[ivgraai]

No description provided.

[ivgraai]

• E.g. use Redux more times

[ivgraai]

• E.g. useEffect, useState
• Or React.PureComponent

[ivgraai]

• E.g. delete unused components
• And move DbHelper into services

[ivgraai]

React.PureComponent
Class vs. Functional components
Hooks API Reference
Higher-Order Components

---

Scaling your Redux App with ducks
Immutable.js
The Functional Side of React

[ivgraai]

React.PureComponent implements it with a shallow prop and state comparison. (value and memory address checks)

If your React component’s render() function renders the same result given the same props and state, you can use React.PureComponent for a performance boost in some cases.

Only use React pure component when the React component won’t be mutated by state or props.

Also, if you plan to use React children components inside your pure component, make sure those children components are pure as well.

Functional components are ones that don't have lifecycle functions. They're supposedly stateless, but they're so nice and clean that we now have hooks (since React 16.8) so you can still have a state. So I guess they're just "clean components".

That being said, you will gain much more from using PureComponent in your root level nodes (i.e. PureComponent will not improve overall performance as much in leaf level components because it only saves renders from that component).

PureComponent is only great with simple flat objects/props or by using something like ImmutableJS to detect changes in any object with a simple comparison.

Interesting patterns

[ivgraai]

Go with functional if your component doesn't do much more than take in some props and render. You can think of these as pure functions because they will always render and behave the same, given the same props. Functional Components mainly focuses on the UI of the application, not on the behaviour. Class components are used as container components to handle state management and wrap child components.

Stateless functions are the "functional components". Hooks are predefined functions that can be used inside a function component to enhance it with state, life cycle management, etc.

They can be used, if you don't need state and lifecycle methods, etc. Furthermore they can be turned into stateFUL function components by using hooks. Function instead of class, no this, no render function, just return, reuse code more easily by importing functions and using it inside the component

Class based components:
state
lifecycle methods
memoization with React.PureComponent

Functional components:
state (useState, useReducer hooks)
lifecycle methods (via the useEffect, useLayoutEffect hooks)
memoization via the memo HOC

Why do I prefer Funtional components?
React provide the useEffect hook which is a very clear and concise way to combine the componentDidMount, componentDidUpdate and componentWillUnmount lifecycle methods.
With hooks you can extract logic that can be easily shared across components and testable.
Less confusion about the scoping.