Reactjs

[DanKim0213]

Whatever relates to React!

• React's strict mode renders twice!
  • Strict Mode calls some of your functions (only the ones that should be pure) twice in development.
• React Synthetic Event
  • Your event handlers will receive a React event object. It is also sometimes known as a “synthetic event”. It conforms to the same standard as the underlying DOM events, but fixes some browser inconsistencies.
  • React Event object
  • Responding to Events

[DanKim0213]

How we declare states

SQL Normalization helps us to declare states

According to principles for structuring state:

there are a few principles that can guide you to make better choices.

• Group related state.
• Avoid contradictions in state.
• Avoid redundant state.
• Avoid duplication in state.
• Avoid deeply nested state.

[DanKim0213]

Why React JS is a Library not Framework

The main difference between a framework and a library lies in a term called ”inversion of control”.

React is referred to as “unopinionated” because there are lots of options while Next.js is a framework of React JS which provides a lot of built-in features like routing, server-side rendering, image optimization, and much more.

• https://www.tjwebdev.in/blogs/why-react-js-is-a-library-not-framework

[DanKim0213]

Optimizing Performance

There are several ways you can speed up your React application.

(Note that Don’t optimize prematurely!)

How

• Use the Production Build
• Profiling Components with the DevTools Profiler
• The Power Of Not Mutating Data

Avoid unnecessary Effects that update state. Most performance problems in React apps are caused by chains of updates originating from Effects that cause your components to render over and over.

If a specific interaction still feels laggy, use the React Developer Tools profiler to see which components would benefit the most from memoization, and add memoization where needed. In the long term, we’re researching doing granular memoization automatically to solve this once and for all.

References:

• Skipping re-rendering when props are unchanged
• Optimizing performance
• React Dev Tools
• Synchronizing with Effects
• You might not need an effect

[DanKim0213]

React Server Components

React Server Components (or RSC) is a new application architecture designed by the React team.

Server Components can run during the build, letting you read from the filesystem or fetch static content. They can also run on the server, letting you access your data layer without having to build an API. You can pass data by props from Server Components to the interactive Client Components in the browser.

RSC combines the simple “request/response” mental model of server-centric Multi-Page Apps with the seamless interactivity of client-centric Single-Page Apps, giving you the best of both worlds.

React Server Components has shipped in Next.js App Router.

References

• React Server Component
• Introducing Zero-Bundle-Sizes React Server Component

[DanKim0213]

React.dev

What changes are there on the site?

• React.dev team includes diagrams, illustrations, challenges, and over 600 new interactive examples.
• The new docs teach React with Hooks from the beginning. The docs are divided in two main sections:
  • Learn React is a self-paced course that teaches React from scratch
  • API Reference provides the details and usage examples for every React API.
• Check your understanding with challenges
• Some API pages also include Troubleshooting (for common problems) and Alternatives (for deprecated APIs).
• You’ll notice that every API page is split into at least two segments: Reference and Usage.

React.dev team refers "browser rendering" as "painting" to avoid confusion throughout the docs.

The previous React documentation site has now moved to legacy.reactjs.org.

References

• Introducing React Dev
• Epilogue Browser Paint

[DanKim0213]

What I learned while reading Memo

https://react.dev/reference/react/memo

1. Memo itself
2. You might not need Memo
3. Accepting components as JSX Children do not cause re-rendering => let’s test using console.log
4. useMemo and useCallback are used together with Memo

“React normally re-renders a component whenever its parent re-renders. With memo, you can create a component that React will not re-render when its parent re-renders so long as its new props are the same as the old props. “

https://react.dev/reference/react/memo#should-you-add-memo-everywhere “If your app is like this site, and most interactions are coarse (like replacing a page or an entire section), memoization is usually unnecessary. On the other hand, if your app is more like a drawing editor, and most interactions are granular (like moving shapes), then you might find memoization very helpful.”

“When a component visually wraps other components, let it accept JSX as children. This way, when the wrapper component updates its own state, React knows that its children don’t need to re-render.”

https://react.dev/reference/react/memo#minimizing-props-changes “When you use memo, your component re-renders whenever any prop is not shallowly equal to what it was previously. This means that React compares every prop in your component with its previous value using the Object.is comparison. Note that Object.is(3, 3) is true, but Object.is({}, {}) is false.” “ if the prop is an object, prevent the parent component from re-creating that object every time by using useMemo:” “When you need to pass a function to memoized component, either declare it outside your component so that it never changes, or useCallback to cache its definition between re-renders.”

[DanKim0213]

Custom Hooks let you share stateful logic, not state itself

https://react.dev/learn/reusing-logic-with-custom-hooks

whenever you write an Effect, consider whether it would be clearer to also wrap it in a custom Hook. Wrapping it into a custom Hook lets you precisely communicate your intent and how the data flows through it.

With time, the React team’s goal is to reduce the number of the Effects in your app to the minimum by providing more specific solutions to more specific problems. When React adds new features, you can remove those Effects without changing any of your components.

reason for why wrapping Effects in custom Hooks is often beneficial:

1. You make the data flow to and from your Effects very explicit.
2. You let your components focus on the intent rather than on the exact implementation of your Effects.
3. When React adds new features, you can remove those Effects without changing any of your components.

The code inside your custom Hooks will re-run during every re-render of your component. This is why, like components, custom Hooks need to be pure. Think of custom Hooks’ code as part of your component’s body!

[DanKim0213]

New APIs that seems useful

use() for fetching data useSyncExternalStore() for sync

[DanKim0213]

Q. is it appropriate to pass down setState() by itself to child components, rather than a concrete event handler?

No because React keeps its design pattern focused on concrete high-level use cases.

For example, custom hook and Hook api itself.

To comply with its pattern, we should pass a concrete handler down to child components.

[DanKim0213]

React Batches

Automatic Batching

Starting in React 18 with createRoot, all updates will be automatically batched, no matter where they originate from. This means that updates inside of timeouts, promises, native event handlers or any other event will batch the same way as updates inside of React events

React batches state updates

React waits until all code in the event handlers has run before processing your state updates. This is why the re-render only happens after all these setNumber() calls."

[DanKim0213]

Data Suspense

Q. isLoading vs isLoaded

React Batches are automatically happens. Thus,

const [isLoading, setLoading] = useState(false);
useEffect(() => {
  setLoading(false);
  fetch('/items').then(res => res.json()).then(data => { setItems(data); setLoading(false); });
}, []); // setLoading(true) and setLoading(false); batch together. Therefore, not allowed.

Instead,

const [isLoaded, setLoaded] = useState(false);
useEffect(() => {
  fetch('/items').then(res => res.json()).then(data => { setItems(data); setLoaded(true); });
}, []); 

Of course, flushSync can helps you to prevent the batch. But, in most cases, it decreases the React performance.

Q. React.Suspense