Youssef Benlemlih
Youssef Benlemlih
  • Видео 21
  • Просмотров 38 513
Senior Devs Use These React Hooks
Hooks have hanged the way we build React applications.
They got rid of a lot of code complexity by encouraging composition over inheritance
But where the magic really shines is with custom hooks.
So today I want to share must-know hooks that I personally can't go without.
By the way, you can find all these hooks in usehook-ts or other react hook libraries (like useHooks, aHooks or react-hookz).
⏳ Timestamps
00:00 Intro
00:48 Hook #9
01:20 Hook #8
01:56 Hook #7
02:51 Hook #6
03:24 Hook #5
03:49 Hook #4
04:20 Hook #3
04:46 Hook #2
05:57 Hook #1
06:36 Watch Next
Background Music
Almost in F - Tranquillity by Kevin MacLeod is licensed under a Creative Commons Attribution 4.0 license. creativecommons.org/licens...
Просмотров: 3 551

Видео

React Design Patterns: Handling Modals (3 Ways)
Просмотров 2,4 тыс.День назад
Modals are UI elements that users are used to in modern websites Having created modals in so many react projects, I noticed that there are 3 patterns that always repeat, when it comes to create modals. So today I want to share 3 React Patterns that you can use to easily implement modals as well as some edge cases that you should watch out for. ⏳ Timestamps 00:00 Intro 01:02 Pattern #1 01:26 Pat...
Headless UI Was a Bad Idea...
Просмотров 3,2 тыс.21 день назад
Headless UI Libraries like Radix UI (the library behind Shadcn/ui) and Headless UI have gained a lot of popularity… but are they the right choice for you? ⏳ Timestamps 00:00 Intro 00:26 What are Headless UI Libraries? 01:12 Challenges 01:52 Comparison with traditional UI Libraries 03:13 Takeaway 04:14 Bloopers 📚 My Free Resource Collection www.youssefbee.com/frontend-kit
React Query Full Course (With Common Patterns & Best Practices)
Просмотров 3,7 тыс.Месяц назад
A complete guide to React Query (a.k.a TanStack Query), a server state management library, that solves many problems related to fetching data ⏳ Timestamps 00:00 What You Will Learn 00:30 Why React Query 01:26 What You Will Build 2:39 Project Setup 3:35 Setup React Query 4:49 Your First Query 8:14 Use Paginated Queries 10:23 Handling Loading 11:01 Handling Errors 12:50 Disabling Queries 16:03 Qu...
STOP Using 'style' in React
Просмотров 2,7 тыс.5 месяцев назад
React's style prop comes with a lot of problems. Checkout these 4 alternatives ways to style your app in React. ⏳ Timestamps 0:00 Style Problems 0:36 In This Video 0:51 Approach #1 1:21 Approach #2 1:54 Approach #3 2:47 Approach #4 4:08 End 📚 My Free Resource Collection www.youssefbee.com/frontend-kit
React useState: Usage, Examples & Pitfalls
Просмотров 2387 месяцев назад
Learn how to use the useState hook, from its basics to advanced usage, with clear examples and pitfalls to avoid. ⏳ Timestamps 0:00 What To Expect 0:28 What is useState? 1:15 Getting Started with useState 2:15 Example 1: On/Off Switch 4:24 Example 2: To-Do App 6:36 Pitfalls of Using UseState 7:12 Pitfall 1: Setting State Directly 8:30 Pitfall 2: Consecutive setState() Calls 9:58 Tips for Effici...
Reviewing your React Code: Episode #3
Просмотров 9 тыс.7 месяцев назад
The third episode of the React Code Review series, where I provide feedback on your React projects. This covers React & TypeScript topics, including the useCallback hook, TypeScript discriminated union, TypeScript declaration files, Enums vs string literals and other improvements like the use of Generics. ⏳ Timestamps 00:00 What To Expect 00:30 Demo #1 01:10 Review #1 02:57 Demo #2 04:04 Review...
I Tried The NextJS App Router. It's Awesome.
Просмотров 1777 месяцев назад
The NextJS App Router has been a game changer for me. Here are 4 reasons to make the switch from the Pages Router. ⏳ Timestamps 00:00 Intro 00:16 Reason #1 00:48 Reason #2 01:07 Reason #3 02:05 Reason #4 02:55 Outro 🦊 Awesome Resources A collection of my favorite Tools, Bookmarks and RUclipsrs. www.youssefbee.com/resources 🔗 Mentioned Links: Theo's Video: ruclips.net/video/VIwWgV3Lc6s/видео.htm...
Reviewing your React Code: Episode #2
Просмотров 2,7 тыс.8 месяцев назад
Reviewing your React Code: Episode #2
Reviewing your React Code: Episode #1
Просмотров 1,8 тыс.8 месяцев назад
Reviewing your React Code: Episode #1
The Problem with TypeScript Enums
Просмотров 2889 месяцев назад
The Problem with TypeScript Enums
Git Merge vs. Rebase: When to use each?
Просмотров 251Год назад
Git Merge vs. Rebase: When to use each?
4 Quick Tips To Code Faster
Просмотров 213Год назад
4 Quick Tips To Code Faster
Update All NPM Dependencies: Fast & Easy!
Просмотров 3 тыс.Год назад
Update All NPM Dependencies: Fast & Easy!

Комментарии

  • @JonathanDsouza-f4j
    @JonathanDsouza-f4j 21 час назад

    Radix ui, create context. Thank me later

    • @youssefbenlemlih
      @youssefbenlemlih 10 часов назад

      Thank you 🙏. Wow, so I just reinvented the wheel, I guess. I checked radix's code, it's more or less the same implementation: github.com/radix-ui/primitives/blob/main/packages/react/context/src/createContext.tsx

  • @neginjahangiri5836
    @neginjahangiri5836 22 часа назад

    Great content! Very interested in the implementation of these hooks from scratch

  • @CanisLatransMedia
    @CanisLatransMedia День назад

    Great video! I'd add to the list react-use-measure, founding it useful with aniamtions.

  • @youssefmahmoud6268
    @youssefmahmoud6268 День назад

    Thanks Youssef, great vid.

  • @FuzailShaikh
    @FuzailShaikh 2 дня назад

    Awesome! Thanks!

  • @BakerMiloudi
    @BakerMiloudi 2 дня назад

    Goated video, thanks!

  • @zeeshan4341
    @zeeshan4341 2 дня назад

    I just want to ask do we still need some global state management tool for global state like redux toolkit, zustand etc ? and can we use those in combination with recat query ? Also show the getContacts, getContact functions code pls.

    • @youssefbenlemlih
      @youssefbenlemlih 10 часов назад

      It depends on the app you're building, and especially WHERE the data is stored. If the data is saved on a backend, and you query it and modify it via API calls, then react-query should be sufficient. If you're dealing with complex client state, where the data is modified on the client, then I would go with RTK & co. Combining react-query with other state management libraries is also easily doable. A common pattern is to have some state stored in Zustand (for example) and passed to a custom query hook as a parameter.

  • @shayokhshorfuddin2576
    @shayokhshorfuddin2576 3 дня назад

    Great production quality!

  • @youssefbenlemlih
    @youssefbenlemlih 4 дня назад

    CODE: gist.github.com/youssefbenlemlih/35197838b77e251d3a48bc125f03e70a

  • @vinith-z7z
    @vinith-z7z 4 дня назад

    nice content bro keep rocking'

  • @ONESTTEFTEO
    @ONESTTEFTEO 4 дня назад

    Searching for Comment

  • @akileshrao
    @akileshrao 4 дня назад

    Awesome video as usual. Just wanted to check your editing/recording toolset. I too make content around web dev but could never nail down the editing side of it. Maybe a separate video that explains your video editing journey? 🤔🤔🤔

  • @tauhid97k
    @tauhid97k 7 дней назад

    I really like Headless UI. You say more control comes with more responsibility, I believe it ultimately depends on your skills. Personally, I need to ensure that I deliver the exact custom design my client requires. Having the ability to create consistent designs using custom CSS or Tailwind CSS, along with the freedom to animate elements however I choose or utilize any animation library, is a significant advantage. For those of us who are passionate about UI/UX, I think this is one of the greatest advancements in front-end development.

  • @NiyubwayoIrakozeElie-l8v
    @NiyubwayoIrakozeElie-l8v 9 дней назад

    Great video! may you also show us how you did backend?

  • @ManishPanchal-t2d
    @ManishPanchal-t2d 10 дней назад

  • @neginjahangiri5836
    @neginjahangiri5836 10 дней назад

    Great content

  • @crazyk8013
    @crazyk8013 11 дней назад

    What are good react projects which would help landing you a job?

  • @viniciusm.m.7822
    @viniciusm.m.7822 12 дней назад

    Thanks!!!!

  • @Ss-zg3yj
    @Ss-zg3yj 14 дней назад

    Dude face look like he's 40, but with a 16 years old teenager haircut 🤡

  • @Ss-zg3yj
    @Ss-zg3yj 14 дней назад

    Instant dislike, also fast forward without watching (for the algo). Good job with the title, moron!

  • @Ss-zg3yj
    @Ss-zg3yj 14 дней назад

    What a 🤡

  • @SoftRelaxingAndCalmMusicNature
    @SoftRelaxingAndCalmMusicNature 16 дней назад

    could talk loader? my volume is max but I can't barely hear you

  • @imfastboi
    @imfastboi 17 дней назад

    Thanks for the reminder, I always get slice and splice confused lmfao

  • @francescoanastasio2021
    @francescoanastasio2021 18 дней назад

    The biggest issue with headlessui is that in many cases it overcomplicates things that could be done with just 20 lines of plain css. Transitions for example give more problems than they solve, even implementing a complex dialog can become a nightmare and make you loose a lot of time. The lack of style, although makes sense for a RUclips video because not everyone might be familiar with the term “headless”, it’s not the point and actually it a pro rather than a con. For solo developers, I would rather suggest to invest a considerable amount of time and think of their own design system and write their own reusable components, so when you need something you know where to find it and how to tweak it.

  • @mateus-dot-cc
    @mateus-dot-cc 23 дня назад

    nice video! optimistic is great I'll try to use

  • @endlesslysorrow
    @endlesslysorrow 25 дней назад

    соболезную братишка, что не осилил shadcn

  • @Stying
    @Stying 26 дней назад

    Its just a rage bait

  • @_purple_44_
    @_purple_44_ 26 дней назад

    Bro should watch his videos before uploading

  • @theBarracuda_
    @theBarracuda_ 26 дней назад

    L take (didn't watch)

  • @_purple_44_
    @_purple_44_ 26 дней назад

    How high are you? Me: "Headless UI's sucks"

  • @reze_dev
    @reze_dev 26 дней назад

    To be honest, shadcn is the best ui library i ever found. You can build something fast with so many components. Skipped the video after 1 minute

  • @tylerjnewman
    @tylerjnewman 26 дней назад

    Like the other comments say, this is worse than bad advice because it has the semblance of good advice. The video is logically inconsistent with the reasons why it prefers a UI library, citing less bloat or difficulty handling the component. I don’t feel the presenter has coded enough to know how much easier it is to work with shadcn and radix rather than trying to customize a library where every is abstracted away from the developer

  • @Kazeno
    @Kazeno 26 дней назад

    23 likes and 20 dislikes, thats wild

  • @kangar1797
    @kangar1797 26 дней назад

    For me Headless UI is meant for people who want to just use a component library but still get to customize the styling so it doesn't look like every other app (think of the bazillion of apps using material UI). 1:30 I do agree on the idea that a Headless UI doesn't really mean owning the code as you are still literally using a dependency. however i don't think most people really care about that. As long as they own the styling and can *_slightly_* tweak the behavior, they're happy 1:53 however, i don't think this other point is really fair, the point of the Headless UI librairies *_IS_* to give that slight bit of flexibility. In the mantine example, the pagination component is a complete black box and easily styling its inner part would be fully dependent on its API. the shadcn/ui version is a *_slightly less_* black box whit a bit more control. Even though i see a lot of people are disagreeing completely with you in the comments. we know for a fact that many share the same feeling as you just by looking at how popular non headless UI libraries are. Ultimately these discussions are important because they show that there is not a single way to do things and that the diversity in developer needs will always create new and interesting patterns and paradigms. overall great content!

  • @arisudana3672
    @arisudana3672 26 дней назад

    Skill issue

  • @donovanfitz5204
    @donovanfitz5204 26 дней назад

    This is great advice if you never want to improve at all! All programmers know you have to keep learning though, you're only hurting yourself long term with this attitude. Honestly your job is 100% replaceable by AI if you can't even make custom components.

  • @over9000andback
    @over9000andback 26 дней назад

    I only need 3 libraries ever: HTML, CSS and JS

    • @nicolaska1761
      @nicolaska1761 26 дней назад

      You never worked on a big project with deadlines then

  • @carlonolle1934
    @carlonolle1934 26 дней назад

    missed the hole point of headless ui`s, instead chooses to use component libraries that use JS most of the time that sometimes isn't even server component ready (chakraUi). You do you, i would choose Radix/Shadcn everyday

  • @jamesgphillips91
    @jamesgphillips91 26 дней назад

    Ngl this sounds like skill issues and like you don’t understand how and why you’d want to use components like shad. I don’t miss writing it all myself that’s for sure, and ui libraries that hold your hand also keep you down in a lot of ways

  • @nomadshiba
    @nomadshiba 26 дней назад

    many ui libraries just reinvent things you can already do with semantic html. if not with tags, then with roles and aria attributes. you can just style those directly. i don’t get why you'd need a library that you style based on data-attributes and classes.

  • @codedusting
    @codedusting 26 дней назад

    1. You need to learn design then. 2. In shadcn, you own the code. In Mantime, you don't. So no idea why that was rhe complaint point?

    • @ooijaz6063
      @ooijaz6063 26 дней назад

      You own the maintenance as well. Tradeoffs as always.

    • @kangar1797
      @kangar1797 26 дней назад

      The shadcn/ui code is dependent on Radix primitives, you don't own that. This reasoning can go on and on and is primarily based on the nature of the React (and other JS frameworks) ecosystem, which is completely based on depending on others people's code. There nothing inherently wrong with dependency, but if the goal is to *_"own"_* the code, then a component *_library_* is not the way to do it.

    • @codedusting
      @codedusting 26 дней назад

      @@kangar1797 precisely

  • @miguelrubio8093
    @miguelrubio8093 26 дней назад

    Horrible advice, just horrible....

  • @KamuranDehliz
    @KamuranDehliz 27 дней назад

    You talk about depending on the project to stay viable, yet then you mention UI libraries. If the UI library dies, it’s not just about swapping components; it essentially means reprogramming the entire application.

  • @mhoyle95
    @mhoyle95 27 дней назад

    So for you personally, you want already styled components because you don't enjoy or as you have claimed you are not great at UI/UX design. That's fine, but its purely a personal decision. as someone who has a background in front end design I was delighted that there was no styling already to override which can be a pain. Further more, its completely open source so you DO own the code, you can maintain and change things that you like or just do a complete fork if you know what you are doing. Even if it did get abandoned, many people use it and will probably be forked and taken over by another team.

  • @janpapaj4373
    @janpapaj4373 27 дней назад

    L take (didn't watch)

    • @MrinmoyRoy1990
      @MrinmoyRoy1990 26 дней назад

      The title and tumbnail is clickbait. The actual take is not as bad.

    • @janpapaj4373
      @janpapaj4373 26 дней назад

      @MrinmoyRoy1990 doesnt deserve viewer retention then

  • @abelbartolomeu2795
    @abelbartolomeu2795 27 дней назад

    Bad content bro

  • @mohammadabbas1623
    @mohammadabbas1623 27 дней назад

    Another prospective of thinking

  • @airixxxx
    @airixxxx 27 дней назад

    This is probably one of the worst advices I have watched on RUclips yet.

  • @piyushaggarwal5207
    @piyushaggarwal5207 29 дней назад

    Hi Youssef! Nice video.

  • @krishparmar7917
    @krishparmar7917 29 дней назад

    great 💙