Darius Cosden 🧑🏻‍💻

With this, the server components stay rendered on the server, and the client component holds all the interactivity

This gets you the best of both worlds

Really cool pattern huh? Try it out!

The solution is to create a ClientComponent that has that can toggle between both components with state

This way, the client decides what should render, and the framework fetches the correct component based on the state variable

And yes, this works with server components

Here's our situation:

These are all server components and they ideally should remain on the server

But we don't want to show both at the same time. We want to be able to toggle between them

That can only be done on the client

How can we do it?

Here's a cool pattern to use in React if you're combining server and client components

The goal is to separate the client rich interactivity from the efficiency of running your code on the server as much as possible

The result is truly the best of both worlds

This has many benefits:

1. It doesn't use useEffect
2. It has no side effects
3. No dependency arrays
3. It doesn't cause a re-render due to using ref
4. It's super simple

Bonus: Make it into a custom hook and reuse it

First, understand that useEffect isn't the right tool for this

useEffect is meant for running code in side effects, not firing things once

Instead of using a useEffect, you should run code directly during render with a ref

Update the ref when done and it won't run again

Sometimes in React, you want to run code in a useEffect only once

Even if the code dependencies change

Unfortunately, React doesn't like this (even though it's a valid use case)

But don't worry, I got you. Here's how you can do it

Run code when window size changes in React #react #nextjs #frontend #code #reactjs How to Run Code When Window Size Changes in React

Just posted a video about this as well

youtube.com/shorts/dAKm...

And that's it, that's the entire functionality

You can wrap it in a custom hook useWindowSize that returns the size

This can now be used anywhere in your application where you need this functionality!

Then, using a useEffect, hook into the window's "resize" event

Create an empty effect with no dependencies, and define your handleResize function

Then add a listener using window.addEventListener on the "resize" event

Don't forget to clean up the listener on unmount!

First, you need a state variable to hold the width and height of the window

This will enable your React app to react (no pun intended) to changes to it

In React, sometimes you need to run some code when the browser window size changes

Here's how to do it cleanly by hooking into the window's "resize" event

Bonus: you can create a really nice custom hook out of it

Cosden Code Waitlist Waitlist

Join the waitlist cosdencode.ai

It's also way simpler to implement. I don't need to host my own infra or spend time writing tests

I can just focus on creating the courses

And if your system prompt is good, this works really well

Instead of running automated tests, or even having a human review lesson submissions, the AI does it

The feedback is much more personal and thoughtful, and actionable

This fits with the overall platform being human-created courses delivered by AI

AI is grading my students on my dev learning platform

And it's much better than a human or automated tests

This unlocks a whole new way of personalized learning

How to handle state objects in React #react #nextjs #frontend #code #reactjs How to Update State Objects in React

Just made a video on this as well

youtube.com/shorts/zum_...

With this, your state updates are much simpler!

Fun fact, this is actually what Redux Toolkit uses by default for their reducers

So it's worth a shot

By using the "produce" function, you can write your updates by applying them to a draft instead of the actual state object

This looks like mutating code (which you can't do in React) but it's actually not

The produce function will do the spreading for you automatically

You can use the immer library to make your updates

It allows you to write much simpler code

immerjs.github.io/immer/

Updating a property on a deeply nested state object in React can be cumbersome

You have to spread every layer until you get to the one you need to change

This isn't fun, especially if you are doing it often

Here's a much simpler way to do it

📥 SECRET PROJECT (Newsletter) → https://cosdencode.ai📈 Advanced Patterns React → https://cosden.solutions/advanced-patterns-react🚀 Project React → https... Authentication Gone Wrong (React Code Review)

Here's the full video

youtu.be/ZIhgAZ8ZH9c

Horrible UX and DX. Don't do this

Here's the solution:

Since we have server components, just do the auth check there on the server

No need for client components, and the redirect can happen before anything is rendered

No useEffects, no ProtectedRoute needed

Much simpler code

Because this is a client component, this auth check happens after all server components, after the JS bundle, and finally the component mounted

This is super inefficient

Even worse, the posts are fetched regardless of auth. They are just hidden from the UI until auth is fetched

Well, if we look at ProtectedRoute, we can immediately see the problem (removed all non relevant code)

It is a client component, and on mount it will fetch and check user token

If there is no token, it will redirect user to login page

Can you see the problem?

Consider this component, seems pretty innocent, right?

It's a server component, fetches the posts, and passes it to PostsPage (client component)

The auth is handled in ProtectedRoute

So many React devs implement authentication wrong in their apps

I just reviewed this code on the channel and there are some lessons here for every React dev

Here is how not to do authentication in React

Cosden Code Waitlist Waitlist

Join the waitlist cosdencode.ai

One of the biggest advantages of my AI learning platform is that I don't have to spend so much time creating entire courses

An outline with details and good prompts is more than enough

The AI does the rest

The result is actually better than if a human were to teach

You Don't Know How This React Library Works #react #nextjs #frontend #code #reactjs Why Is Everyone Hating This React Trick?

Just posted a video version of this

youtube.com/shorts/P3dF...