Video

Exactly! I'm in the React world by career choice, but I've been a huge fan of Solid JS by Ryan Carniato! He had the right idea.

Exactly!

The React team doesn't necessarily support all use cases, but many libraries use `cloneElement` internally. I've been looking at alternatives for a while now because I never liked how this was invisible and difficult to enforce in TypeScript. On the other hand, I figured out how to make render props fit my needs with memoization. Months later, in an interview with a Microsoft dev, he pointed out I could use useCallback and get a similar effect! It's not exactly the same, but it fixes my biggest gripe of render props. Another friend pointed out you could wrap these component functions to create new ones that had the functionality you wanted built-in. Where I work right now, they wanted render props with useCallback, so that's what I have. I haven't experimented with new ways to fix this since, but I'm sure there will be better ways in the future.

Thanks so much! I'd love to do more of these. I even have one ready on TypeScript but haven't had time to put it up yet (3 kids now) These styles of video take two weeks to create including all weekend and also time practicing my ad libs. Really glad you like the production value!

@@KevinGhadyani Yeah no worries I know it can get chaotic. I do have a few questions though. 1. What’s your stance on server components? Does this model still work with all the context? I’m assuming a lot of them would need to be client components to work to track the state. 2. You briefly mentioned jotai. Could you use it instead of context? 3. Opinion on tailwind now that it has exploded in popularity. I’ve personally used it for a few years now and couldn’t imagine styling an app without it or a solution very similar it. Shadcn/ui which runs on radix is also incredible to use and it looks like it uses a similar pattern you describe in the video. Would you call that children first?

​@@keelangibb565 For #1, server components can track state too. The server keeps the HTML loading in the background and throws JS it generates at the client. That's how it works. So if you have state, it should retain in server components. Am I missing something? That's what my original exploration showed when I first tested it out in a different video: czcams.com/video/6R_r6AqscqQ/video.html&pp=ygUbcmVhY3QgMTggc3NyIGtldmluIGdoYWR5YW5p #2 YES! I've actually used Jotai 4 times now in place of context. If I need global context, I use Jotai. It's like Redux in that it's not tied to React, so you can use it to write your own logic and associate multiple frameworks or multiple React instances. This is very common with micro frontends. #3 My opinion on Tailwind hasn't changed except on one point (I'll say at the end). If you write your HTML with Tailwind classes, you're doing it wrong. You need to write Tailwind like you're writing Emotion CSS (which you shouldn't be writing inline if you want your render code to be readable). Make it type-safe (which is super difficult to do in VSCode when it's not inline) and add some helper functions so it's easy to do line-by-line (function args) rather than a stupidly long string of random classes. There are so many gotchas! Vanilla Tailwind sucks and leads to the same problems I dealt with at a marketing site job in 2012 where you literally couldn't tell what was going on with the CSS or the HTML. YUCK! I absolutely don't recommend it if you're writing HTML like it's 1994. Also, unless you're using Vite, it's tricky to get Tailwind setup correctly. You have to purge out classnames from the final compiled output or your bundle jumps up 4MB. Lastly, you cannot use Tailwind classnames. This is why you _need_ helper functions or something similar. Tailwind classnames have to be namespaced you absolutely will run into the same Global CSS issue everyone runs into when you try to scale your site or upgrade something (like the Tailwind version) or change one style in one place of the Tailwind config and hope it doesn't globally affect your whole app. I am constantly dealing with micro frontends, and all of those have different CSS considerations based on the version of the component library they're running. If Tailwind isn't namespaced, they'll all share the same Global CSS, so when certain micro apps appear on the page at the same time, it could lead to different outcomes depending on which are loading when. Good luck debugging that! It will take WEEKS. And the problems will change over time as different apps add changes. So in conclusion, yes, you can use Tailwind, but I think you need to do a lot of work to make it feasible. I would absolutely never use it out-of-the-box. And so you know, I've done 2 Tailwind projects so far successfully on side jobs, so I'm speaking from experience.

I'm not exactly sure I understand your point, but I'll respond the best I can :). I take a different approach at each company I go to based on the needs of the org and the existing codebase. This is just one solution you can use to solve the problem of tight coupling, but not something that works everywhere you go. In general though, the more complex your library, the less complex the code consumers need when consuming it. Where I work now, I have a different approach than this video. Instead of component usage freedom, they want API stability and ease-of-use. Now we're creating one component for each feature rather than a bunch of them that you assemble because that follows the design system better (unlike the patterns I had at this other company). It's a 180 degree difference in component design. The goal of TypeScript and other coding patterns is to make it dead simple to write code the intended way, so other devs can't screw it up.

My bad. That's probably partly on my editing and partly on the fact that I'm a fast talker in general. Newer videos have a different editor. He helps make things sound more natural, but I'd recorded and edited this one before I hired him.

I've changed how I do the useEffect useCallback thing mainly because React has changed. They fixed a bug where state setters would error when used after the component unmounts. In terms of useRef, it's powerful and needs to be done with care, but there are some situations where it's required.

I have it linked in the description I thought. Are you looking for something else?

Man, that's great to hear thanks! ;)

Hope the rest helps you out! There are different ways to approach React components. I was aiming to fix tight coupling. In a later video I did with another group at Microsoft with a similar pattern, I also tried renderProps + useCallback, but it adds indirection. I use that pattern at my current job though. I came up with a way to do children-first with TypeScript and clever use of generics, but it requires some thought to figure out.

Yeah, but I have more videos, just haven't pushed them up yet. 42 total.

That's a great idea and a lot simpler! Personally, I wouldn't depend on proto as that's like black magic; unless I'm missing the mark. It's got that code smell. You also need to check for existing values first too. Hmm 🤔.

It's been a while since I watched this. I might've named it wrong or misremembered when creating the upload. This was definitely one of our topics when I talked to Marc though.

@@KevinGhadyani i will listen to it again, thank you

@coffeeandtalk this interview was broken up into 5 videos, I think, so it may have been in another one from this same group. That's what I mean.

@@KevinGhadyani the other parts are still on your channel or where do I find them? Because I can use both redux and context but to be a good engineer I want to understand when to use which and not just apply blindly redux for everything

@coffeeandtalk it's really one of those "do what's best for your team on your project" situations. When I used Redux in the past, I did all Redux. This was before React Context was exposed cleanly to components. After React Context, I only used React Context because I prefer localized states. You can also use `useReducer` to make Redux-style with React Context. I still use Redux for state sharing between different JS frameworks or for backend code (yes, it works in Node without React).

I appreciate it! I'd love to make a course especially with the passive income source. Of the few courses I've tried for work, I've never gotten anything out of them, and I've never finished any either. I don't really think I'm qualified to do courses. I'd hope my CZcams videos provide enough information.

@@KevinGhadyani Bummer... A course on how to properly design components would be awesome. Anyway, do you have source code with all the examples above? I would like to look at them in order to learn more. Some of the stuff is just too vague. BTW, I'm pretty sure you are qualified. :D

Yeah can use multiple comma-separated lines in box-shadow to fake it.

I did this. You just need a custom cell for the whole row that renders a table.

Sorry about that. That's a great idea. Did I misname the video too? I broke up our convo into multiple videos each where we talked about a different topic relating to Redux. Pretty sure this one is where we name-dropped Dan Abramov because of the Context vs Redux debate.

@@KevinGhadyani you did mention both React Context and Dan Abramov, but it was mostly about history. I was hoping for a comparison, pros and cons, when you should choose one or the other, something like that. But there was nothing of the sort.

Understandable.

That gives me a lot more context! Thanks for explaining the benefits!

Just re-watched it. I'm surprised how simple it was. And yes, I don't like "for" loops. I have two LeetCode videos; one with RxJS (functional pipelines) and another where I did the same thing C++-style with a class. The class one took 3 times as long.

For the code of thumbnail? The code is Victor Mono, but I'm not exactly sure what it was in this video.

Sorry about that. It can be tough to come up with examples for an hour-long talk. Showing tons of code on slides is difficult because I can't use proprietary code, and all the crazy transducer stuff ends up being full apps, so it's not easily available. Without building a complete app, it's tough to explain. I'll keep this in mind next time I do something. You're right, these simple tests aren't fully utilizing transducers.