csdpublic

[csdpublic]

Colocated State

One of the leading causes to slow React applications is global state. Colocate state as possible as you can.

The principle of colocation is:

Place code as close to where it's relevant as possible

How people solve?

They debounce user interaction.

Use React’s upcoming concurrent mode

Escape rendering bailout hatches like React.memo

[csdpublic]

Handling react component with error boundary

Use react-error-boundary package.

<ErrorBoundary FallbackComponent={ErrorFallback} onReset={handleReset} resetKeys={[pokemonName]} >

Re-render error boundary whenever resetKeys dependency array changes.

FallBackCompoenent has two parameter: error and resetErrorBoundary.

The parameter resetErrorBoundary calls onReset prop.

Read more at : https://github.com/kentcdodds/react-hooks/blob/main/src/final/06.extra-8.js

[csdpublic]

De-structuring state and state updater

Example (1):

const [{name, age}, setState] = React.useState(null);

Example (2):

const [state, setState] = React.useState(null); 

const {name, age} = state;

[csdpublic]

Naming convention for Loading Status

Let the status has:

‘idle’ | ‘pending’ | ‘rejected’ | ‘resolved’

But the rejected message has an error state message:

‘null’ | ‘message’

[csdpublic]

SOLID Design Pattern

Single Responsibility Principle is:

One class, one purpose

Open-Closed Principle

Don’t make the class need to re-modify again and again. Make the class extensible.

Liskov Substitution Principle is:

Child classes should extend without replacing the functionality of parent classes.

Interface Segregation Principle is:

Break interface into smaller pieces of interface. Don’t make child classes to inherit unnecessary interfaces of parent classes.

Dependency Inversion Principle is:

Make an interface between child module and parent module in cases such that parent modules are depending on child modules.

Read more:

https://www.baeldung.com/solid-principles

https://www.baeldung.com/java-interface-segregation