React useReducer.

• useReducer has always been confusing for me, so I learned it in deapth from here.

First we have to think that useReducer is nothing but solution to useState after it reaches it's limitations.

As your components grow in complexity, it can get harder to see/mantain different components states and update it. As component grow so does t he state logic. So to reduce this complexity and keep all your logic in one easy-to-access place we use useReducer.

We move state logi into a single function outside your component called a reducer.

we have this very interesting thought shift, instead of telling React "waht to do" which we did with useState, we specify "what the user just did", it completely changes the perspective.

A reducer function is where you will put your state logic. It takes two arguments: the current state and the action to be performed. It returns the new state.

 interface Action {
  type: 'increment' | 'decrement';	 
 } 
 
 const initialState = 0;
 
 const reducer = (state, action: Action) => {
  switch (action.type) {
      case 'increment':
	 return state + 1;
      case 'decrement':
	  return state - 1;
      default:
	  return state;
   }
 }
 
 export const App = () => {
  const [count, setCount] = usereducer(reducer, initialState);
 
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount('increment')}>Increment</button>
      <button onClick={() => setCount('decrement')}>Decrement</button>
    </div>
  )
 }

Next.js client component render.

Question: As stated by Next.js, component renders on the server. When it serves to user/(You), you are seeing already pre-rendered page.?

But if that's true, how all this on the fly interaction is possible? Ex: You click on a button and it changes the count.

Answer: You can't do that. Next.js does not allow any interaction on the server-side. It's only for static page generation. But most interesting thing Next.js does on client side is called hidration, which is how we can interact with with this pre-rendered pages as well.

Yes, indeed even client components pre-rendered in server, which is good coz it help use faster page load etc. And pre-rendered means the static html files/structure.

Then for interaction React performs process called hydration, During hydration, React attaches event listeners and state management to the static HTML, making it fully interactive.

Parallel and Sequential Fetching

• You need to be aware of two data fetching patterns: Parallel and Sequential.

Sequential:

• Used when one request depends on another.

In this pattern, you fetch data in a sequence, one after another. Request in a component tree are dependent on each other. Longer loading times.

function Page(params)  {
	username = getParams(params)
	artist = fetchArtist(username)
 
	return (
		Display artist name
		Show loading state while Playlist is loading
		Render playlist component with artiestId
	)
}
 
function Playlist(artistId) {
	playlist = fetchPlaylist(artistId)
 
	return (
	    Display list playlist
	)
}

• artist = fetchArtist(username)

• _{(here in between we need some loading state while playlist is loading, So we show fallback UI. nested component to prevent blocking the entire route. e.g., suspense, loading.js)}

• playlist = fetchPlaylist(artistId)

Parallel:

• Used when request are independent but should run simultaneously.

Load data at the same time. This reduces the total loading time. Shorter loading times.

By default, layout and page segments render in parallel.

Blocking issue: if async/await is used inside the same component, it will fall back to sequential. Because, nature of async/await is blocking.

Optimizing with Promis.all

• Put multiple request outside component.

• Use Promise.all to fetch both artist and slbums simultaneously.

• reduces wait time, but renders only both request finished.

generateStaticParams & generateMetadata

• generateStaticParams is used to generate static paths for your dynamic routes.

 export const generateStaticParams() {
    return allPosts.filter((p) => p.publishedAt === "published").
                    map(p => p.slug === params.slug)
 }

Above code snippet is used to generate static paths, we are caching the dynamic route values such that it does not calculate or make a request each time we trigger this dynamic page. First, it caches, then it remains the same across other triggers.