The Perfect Modal in React

Full Video (Gumroad): pixeldesigner6...
Final Code (Gumroad): pixeldesigner6...
Starter Code: github.com/Wah...
📌 Follow me on twitter : x.com/WahyuS002
📌 Follow me on instagram : / pixel.developer

[@ifeoraokechukwu1346]

This is a very clean and nice video. I love the animations and editing of the video and the fact that you used a UI library for the Modal.
Your video started out very nicely - correctly exposing the pitfalls of the way modals are created and handled in React components (whether in a SPA, SSR or SSR+RSC scenario)
However, your final solution is worse because we are creating more boilerplate due to the use case of having multiple modals for perhaps multiple components on a page.
There by increasing the amount of coupling between the logic of modal and that of the page.
At least you would have created a custom hook like so:
export const useModal = (defaultOpen = false) => {
const [isOpen, setIsOpen] = useState(defaultOpen);
const [modalType, $setModalType] = useState(null);
return { isOpen, modalType, setIsOpen, setModalType: (modalType: T) => {
setIsOpen(true);
$setModalType(modalType)
}}
};
But even the above will eventually spiral out of control because to mange it minimally,
you need a dictionary of modal types that map to modal body components like so:
const modalBodyMap: Record = {
"edit": EditProductModal
};
The video ended without you showing the Zustand way to manage all this which i believe is overkill.
No one should require Zustand to manage just modals.
Thankfully, i won't be following the ideas shared in this video
As i have a superior way to manage all this.

[@snatvb]

totaly agree with you

[@lamhung4899]

Your snippets need extra stuffs for Modal's props. And that would be much fun with TypeScript 😊

[@snatvb]

trigger is much more convenient - you're essentially back to the first use of the state

[@webster-dev]

No, use to props om single page or react

[@snatvb]

excuse me, what do you use for video animations? motioncanvas? if yes, could you hint how did you create hirarchy(tree) animation?

[@Pete133]

Right before you showed zustand I was thinking, “this is where I love to use zustand”. It’s so much easier than react state and context or prop drilling. Haha cheers!

[@serhiyi7526]

when I saw zustan, I thought "oh, finally a good solution for modal windows" ( by using global state management ), and then something went wrong. It's a terrible decision because of the useState. Since the problems described earlier were not solved. It is better to create a custom hook that will be responsible for displaying the modal

[@ojez3628]

bro those animstions are crazy good

[@_AshishMohanty]

bro which software or website u use to create this animation?

[@PixelDeveloper]

I'm using motion canvas

[@ikmalilbirri8895]

🤔Then how to pass the selected data to the modal. Add useState again?

[@aufarijaal]

bro is comeback after 2 years as a different "person". mantap

[@raves_r3177]

just use zustand and render the modal only once on the very root of the application.

[@kapiqu2709]

And You finish with so many unused code loaded with every page. Look at First Load JS and page insights

[@inderjotsingh5868]

I don't know , how this happened , yesterday I was searchearing for same on Claude , but didn't got a convincing answer , and today our video was recommended to me .

[@nikhilkr_yt]

yo xccurate! switching career?
didn't know you could code.
Amazing tutorial dude!🔥

[@valostudent6074]

Bro your video are so in depth and so beautifully presented, I am a big fan just watching this video....big fan big fan big fan bro keep it up you are the best

[@PixelDeveloper]

Thank you for the kind of your words 😁

[@aiyn470]

As new dev using react i already learn this by an Accident 😅😅😅

[@ahsanmughal3806]

Amazing. I learn something new ❤

[@sudoalex]

What's that IDE? Looks nice

[@PixelDeveloper]

I'm using nvim for my code editor

[@sudoalex]

@@PixelDeveloper nice setup you should make a video about that 😆

[@indofiz1077]

Are you indonesian?

[@PixelDeveloper]

Yes

[@ariesrabbit]

need your icon extension name 😂

[@PixelDeveloper]

In Neovim, icons are not displayed through an extension because Neovim runs in the terminal. Instead, it uses a specific font family to render icons. The font I use is Nerd Font JetBrains Mono.

[@ariesrabbit]

@@PixelDeveloper tks alot, that just so cool bro, keep ur fire 🔥

[@zaimcodes]

Mantap!

[@AdolfRizzler41]

Which Library is best for modals and notifications ?

[@saiphaneeshk.h.5482]

Nice

[@RutsuKun]

Redux or React Context

[@mohamedbinothman984]

wasting of time