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.
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
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!
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
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 .
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.
![*Next-door 10x Software Engineer* [FULL]](/img/1.gif)
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.
totaly agree with you
Your snippets need extra stuffs for Modal's props. And that would be much fun with TypeScript 😊
trigger is much more convenient - you're essentially back to the first use of the state
No, use to props om single page or react
bro those animstions are crazy good
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
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!
excuse me, what do you use for video animations? motioncanvas? if yes, could you hint how did you create hirarchy(tree) animation?
Amazing. I learn something new ❤
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
Thank you for the kind of your words 😁
just use zustand and render the modal only once on the very root of the application.
And You finish with so many unused code loaded with every page. Look at First Load JS and page insights
bro which software or website u use to create this animation?
I'm using motion canvas
yo xccurate! switching career?
didn't know you could code.
Amazing tutorial dude!🔥
bro is comeback after 2 years as a different "person". mantap
As new dev using react i already learn this by an Accident 😅😅😅
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 .
🤔Then how to pass the selected data to the modal. Add useState again?
What's that IDE? Looks nice
I'm using nvim for my code editor
@@PixelDeveloper nice setup you should make a video about that 😆
Mantap!
need your icon extension name 😂
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.
@@PixelDeveloper tks alot, that just so cool bro, keep ur fire 🔥
Nice
Are you indonesian?
Yes
Redux or React Context
wasting of time
Which Library is best for modals and notifications ?