Jack, your videos and also the COMMENTS on your videos are some of the best in the web dev community. The mantra I usually take when watching a RUclips tutorial is, “go to the comments” because often that’s where the real nuggets of wisdom are. With your videos, the comments always seem to supplement what you are saying and it’s all just one big nugget together. You’ve cultivated a great community here, and I get so much value from it. Thanks to you, and to all the commenters.
Sadly, once performance takes the priority, this is often the only way to do it. Any libraries that work with DOM animations and handling drawing and user input need to eject from react's "re-render on state change" loop as it just doesn't provide the capabilities required. Tracking mouse movements on a 120hz display in a state means that there is a setState triggered once every 8ms. Dragging nodes with this approach is a recipe for disaster. At one point, even Atom was running React, and they had to eject. Framer Motion, react-spring, virtual scrolling libraries, whiteboard / node based tools, and even many state managers use React simply as "keyframes", while the work being done between them is done outside of React.
Yeah, there is definitely a case at the high end for going back to direct DOM access. But that's not where I'm seeing this. I'm seeing this at the starting level where people are taking the skills they learned previously in school and they are applying them to React. Which seems like an obvious thing to do, but is wrong in the most basic cases.
Animation for frame by frame capture, dragging behaviors should not bind to state except "the end result of those actions" afaik. They belong to uncontrolled components. Fast scrolling usually requires you to implement some sort of debounce functions, this is same for vanilla JavaScript. The main problem is that nowadays many devs are being extremely lazy, they just want to learn one thing, and use the same thing or same library everywhere for the rest of 20 years, with the high salary, yet they refused to accept those new subtle differences, the limitation, and the workaround. Then they blame the tool (React for example) they are using is being lame. That's what scares me.
Thank you that you covered this in the right way of "Are you tired of getting all of those HTML elements via JS, directly changing the DOM and keep it in sync with data via triggering the events? And are you tired of massive code duplication and correctly managing IDs in order to not break the logic simply because of changed selectors?. This is why React was created" and not in some technology-hype way, which is popular unfortunetly. I think that in this era of development, React (or any other reactive UI framework/library) became so obvious choice and requirement to know, that beginners have almost no way of understanding all the problems React solves, simply because they didn't have a chance to see how writing reactive UIs looked like some time ago with JQuery days, where you needed to deal with this selectors hell. So giving proper context is always a key for beginners to deeply understand of what React is and what it does and why Thank you Jack again for another awesome video
Exactly!!! I totally get that having not gone through the pain that was state-sync with jQuery/etc. it's hard to really understand WHY we use React. And unless you understand WHY React exists, it's easy to misuse it.
I worked on a react on rails app once that had react code like this everywhere. It was like the developers lived in a cave for the last 5 years. I took over the FE department, and re-wrote the entire thing over 2 months. Didn’t even bother refactoring, nuking it into orbit was the only option.
@@thesunabsolute Some managers told them to switch to react because it was the new hot thing and they just executed without even reading the basic docs ?
That was totally what my first "React" apps looked like. Before I understood "the react way" I was basically just shoehorning in basic JS to get the job done. Another good intro video!
Typically a lot of "bad" examples I see are overblown or something and outright wrong, like no one would actually do it that way. But this is definitely one of the few times where the "obviously bad" example is real, and I've actually seen this in the wild. If people actually wanted to write it this way with the convenience of reusable components, just use a template service like EJS.
I've seen bad examples of this not just here but in Vue as well, but usually that's some idiot developer who was creating a WordPress template and thought it would be ok to use direct DOM manipulation because anything goes in WordPress 😒.
Hey Jack! This was one of the best videos according to me. Helped me immensely in understanding the fundamentals just by watching it. Thanks a tonne for the great job 👍🏻🙌🏻
Hi Jack. Thank you for the great content as always. Your state management and react content really makes difference for web development community. What do you think about doing video about dependency injection (using react context/provider or some third party libraries) and singletons approach to ensure only one store instance when injecting it?
Great video as always! I'm not the perfect coder by ANY stretch of the imagination though I'm surprised to see many people in the comments saying they used to do this!!
Hey Jack! I have a question about nextjs13. I want to load Server Components inside the app folder dynamically. My prevoius approach was to import all my Components into an array and call them. Now its not possible. You maybe could make a video, how I could render Server components dynamically. Maybe like components=[„comp1“, „comp2“…] loop through this array and render it. But all inside the new nextjs13 folder :D Would be great!!!
Why would you do that? We load code dynamically on the client because we want to reduce bundle sizes going out to the client. That's not a concern on the server.
@@jherr Uhm maybe I have to explain my comment a bit more. We developed our own CMS System which works headless. So I started to work inside the pages directory and used the getServerSideProps function. I thought it should render my page on the server and ships the html to the client and thats it. But I still get a CLS (Column Layout shift). I get these CLS on a Component which is totally free of functions but it seems like thats its still rendered on client. And I dont get why?! Now I have to explain why I load the components into an array. First of all, on our CMS you can build a Page. You have pre built componets which you can add/remove or reorder. So I get the JSON where the app could see how the page is buitl with wich content and so on. Now I thought NextJS13 is my game change and I can deliver REAL Server Reendered pages. I need this server rendered pages cause we need a pagespeed above 95 to be competetive to the seo wars on google :D Sorry for my Bad English I hope u understand my problem and my intentions
@@TheVioArtsofficial I'm not understanding 100% but from what I'm getting you get some content from the CMS and pick out a bunch of components to render that content from what you see in that CMS content. Totally cool. What I would do is have a lookup table that has whatever key you are expecting from the CMS and the component that is used to render it. Then you just get the component for that key and use it to render. You don't have to do dynamic imports to do that.
@@jherr yeah right! When I do this in the pages folder everything is fine. But its still not rendered SSR. Now I thought NextJS13 will do the job with, but its not working :D It feels like you cant import React Server Comps dynamically.
@@TheVioArtsofficial Can you be more specific around what "dynamically" means. To me that means `import()` or `require()`. If so, yeah, NextJS 13 is not going to treat that as an RSC.
Stop writing fake react code. Use useCallback rather than inlining your callback on line 10 with onClick. You create a new callback each render. Don't do that. Also: use setCount(oldCount => oldCount + 1) as your useCallback function. Beginners....
i was listening to this, sort of as background noise while i did other things, and had to stop what I was doing when I noticed the console log showing up in the IDE next to the line of code!!! I involuntarily started to salivate like a dog that hasn't eaten and was just shown a fat juicy steak.
How do we extract all hyper links in page which are having external link of site? In this case do we need to have vanilla js for finding tags and manipulate when those are rendered from content apis, please suggest
Do you not control the creation of the links? Wherever you create a link just check the URL it's point to and alter it to suit. I would DEFINITELY NOT search across all the links and change them in the portion of the DOM that React controls.
We dont control the link, just assume entire content will be loaded from content server, At react end, we just sanitize them and feed into component. those link will be populated from content server, we dont alter it, Now i want to have speedbump whenever those links clicked on, can you suggest how we can bring in react way?
I recently had to detect clicks outside of a component, there weren't easy options other than having a ref, then a useEffect to create an event listener to check whether the target was the ref (component) or not (outside). If you search for "React detect click outside component" it's the first stackoverflow link. Wondering if there are better solutions.
That's certainly a decent use case for using a custom event handler that is not supported by React. This video was about trying to ensure that folks aren't writing and manually wiring event handlers for events that React does cover.
I think using HTML is misleading, HTML is just a string/text that it is interpreted by the browser. The result of this is the DOM. React works with the DOM, you tell React what the UI is to be, and React-DOM manipulates the DOM accordingly. That is why the props on primitive components (div, span, h1) are different from HTML attributes. e.g. 'class' attribute, in the DOM is 'className' You can talk about turning it into HTML, but only when you are talking about server-side rendering.
That's a decent rule to live by. If React created the element, React should be the one adding the event listeners. And in the case of document and window, React definitely did not create those.
Not IMHO. The value of count will be up to date because the callback closure set to onClick is regenerated during ever re-render. So no need to use the callback variant of the state setter. The callback variant is best used when you are calling the state setter within a potentially stale callback function. For example, inside of a useEffect callback that was registered onLoad and isn't re-registered and re-run on every render.
POV: I thing it is happening only because as new react developer switching from manual DOM changing mindset to declarative mental modal of React. Sometime I think although React is library we need constraint of framework to build big complex app. So rather build that mental state how react works and go accordingly or use other framework and not to worry at all but there you have to do what framework telling you to do rather than flexible like React. Correct me If I am wrong.
@@jherr Yeah that is my point. React has so much to give but it up to us how we are taking it. And at the end no matter what the technology it is, but not following the best practices or standard it is not going to help us at all. 🙌🙌
It actually doesn't matter in this case because the () => setCount(count + 1) closure is created with the current value of count. () => setCount(p => p + 1) is valuable when the callback closure could potentially be stale.
@@jherr In case you have something else on the page that fills the event queue and delays your clicks, you could have such "stale" closure and your multiple clicks will all set the counter to the same value, whereas with the callback version every single click will increment the counter. So as a rule of thumb, always use the callback version if the setter when the next value depends on the previous one.
@@ThomasBroyer That's the best argument I've heard for it. Though it seems to me that it would only apply to shared state through context, or a global state manager. In which case I would very much agree with the callback version, or whatever dispatching mechanism your state manager supports.
@@jherr Why would it not apply for this simple counter component? (when used on a page with many more things messing around) As soon as you have some long task blocking the main thread or something firing many events, delaying the click events, there's a risk. The counter component cannot know the page context it'll run in.
@@ThomasBroyer Fair. First, I've never actually seen this in production. But I do acknowledge that it is a possibility. That being said, in the circumstance where this is a normal behavior (which would be bad in and of itself) there is a question about what the correct behavior is. If the counter is currently at two, and the user clicks the button, which says "2", and the application is blocking, so the user rage clicks, should it go to "3" when the re-render finally happens, or go to some bigger number they never saw?
Hi, Jack. I'm currently creating a rich text editor in react for my portfolio, to get my first job. I've found that react don't have solution for handling contentEditable elements with react state init. That's why i was forced to use plain js inside react. What do you think about exceptions like that? Have a nice day :)
React is really performant. I think if you get to the point where you have a verifiable performance issue that isn't just a bug, like too many top-level updates that should just be fixed, then maybe you can go to hand tweaking DOM elements using refs. But I've done fast animations using straight React and the perf was fine.
You're paying 142Kb to put React onto the page. You should make the effort to get every ounce of out of that 142Kb you can. Or switch to Solid or Svelte, where you don't pay that overhead. But I think putting React on the page and then actively fighting against it regularly is silly.
Hello Jack, first of all thank you for your great videos, keep i going! :) What if we have a specific scenario where we need to create custom hook to catch onScroll event listener on some div container? What to use instead of addEventListener to the passed reference? Maybe create one video regarding that? Thanks!
That's of course fine because you are in a custom hook. Just remember to remove the event listener when the ref changes. The point of this video was to make sure that folks who are transitioning from learning DOM development to learning React development don't think they are done when they use React components like templates and do all the rest of the work with the DOM skills they just learned. If they are writing custom hooks then they are well past that level of issue.
Sure, when HTML requires an ID for labels or accessibility then sure, I agree as well. Use IDs for CSS or HTML reasons, but not for JavaScript reasons.
@@jherr Agree, I've used it to managed styling for selected items in collection so I've stored in some state the selected id's and used styled components to wrap each item and accept the "selected" prop and by doing so the item component it self wasn't aware of the selection state (SRP) do you think it's a legit way for using the id attr?
@@golansoffer6538 I don't quite follow but it could be cool. I'd love to see it. If you could do a simple codesandbox to demonstrate the approach that would be awesome.
that's the main reason why tons of "react" website on the market are so terrible. There are so many times I saw a react website where every single action will re-render the entire page. Why bother using React if you implemented everything in a traditional MFA(multiple page application)?
I think I have a very old one on Vue. But nothing recent. Honestly, I'm not a big fan of putting stuff behind pay-walls. I'd rather just get paid by ads and put out the content for free to folks.
@jherr thank you for your very helpful and insightful videos. I am in Nigeira was recently hired as a react engineer by a company in the UK. How do you advice I level up, I'm within junior - intermediate level, I want to become really good and valuable. How do I level up. my react knowledge in general. Thank you
What are you using for call tracking etc. as in-editor annotations? I use Quokka Pro a lot on my pure-JS explainers but that seems useful on many levels!
@@jherr hey thx for replying! Like at 06:51 (the whole " × 3 ⌛0⌛6" thing), this is done inline in your VS Code by a "Code Ninja" ext? Can't seem to find anything by that name online except a NoCode platform.
@@jherr Got it, thanks! Another tool by Wallaby.js, sort of a slimmed-down version of Quokka. Although Quokka sure could do that too, it would be way too verbose on other lines for this. Incidentally I hadn't quite noticed this was a console.log call, my mind's eye had seen the annotations right next to the useState() call, so it felt React-specific. Thanks anyway, keep up the great work!
@@christopheporteneuvepro I kinda get the Quokka comparison. But Quokka means firing up a sheet that isn't integrated into the application and seeing the output there. This shows the output of the running application in place. Which is way better. It also shows runtime errors in place. Which is honestly even cooler. ruclips.net/video/bmKDT-yG2eE/видео.html
Curiosity: sometimes it's not better write vanillaJS to solve simple task than give it to react and have to handle state Managements and stuff? One example: I found out that was way easier implement a pop-up or alert component with vanillaJs than through react. In react you gonna have to handle global states, memorization... With Vanilla you simply add and remove a block of html out of react block.
React is definitely better when you have a more complex application and it owns every part of it. If, on the other hand, you have a simple website with popup window, it's definitely overkill. That being said, you can use React's Portals feature to handle HTML elements outside of the React root, but still have it share the same state (so, use the component wherever you like in your tree, pass props for open/close state, etc, but still have it render and update HTML elsewhere)
@1:08 I thought that mixing vanilla-js and react is lvl +99 of expertise 🙃! I see this pattern a lot when trying to work on top of legacy projects/libraries, (PS: I used that while working with Threejs library !)
Hi console ninja (vs code extension) is not installing it saying error it cannot install and cannot compatible with vscode version 1.58.2 version (please tell the solution how to get it)
I'm not affiliated with that company, nor do I do technical support for it. So this sounds like a good question for them. That being said I looked at my VS Code version and it's 1.78.x. So perhaps you should upgrade.
Lool.. I see this too often... Solving react problems using Vanilla.js. But i am not woried about vanilla code in React, i am woried about people doesnt know vanilla and starting to use React first. Thats one hell of a mess in their brain.
I don't know man, they still haven't released it. :( Last I heard a couple weeks back it would be going into alpha release soon. I really jumped the gun on that video. Sorry about that. It'll be worth it when it comes out though, I promise!
It’s a term commonly used to mean “plain” or “basic” so in this case it means plain JavaScript . The term came from ice cream flavours as vanilla ice cream is so widely popular it is often considered the plain or basic flavour.
Question about using ID in jsx. Is it ok to use it in components to implement smooth scroll on a single page ( when not using react router)? Is there a better alternative?
I think it will automate some more mundane tasks, like Copilot. But you'll still need a human to make sure that it is structured and written well. Just like Copilot. Copilot can write some shockingly bad code, that still works, and it takes experience and skill to understand that.
@@jherr thanks I would really love it if you mad a video for everyone else on this iv actually spent the last six months learning an am just about to finish my portfolio website
Thanks Jack, I liked your video much and your teaching is very good and I learned from you a lot. But react state actually gives a performance issue for large scale app.
I hear this a lot; "This won't work for large scale apps." "This doesn't scale." "How does this scale?" Unless you have specific concerns that you can express in engineering terms I don't take that as a credible reason to actively undermine a framework as shown in this video. I've never seen a performance issue in React that was caused by a fundamental issue in the framework. It has always been the application code that was poorly written. Poorly performing code can be written in any framework, including Solid-JS, Vue, Qwik, etc.
Hi Jack, I got a doubt again here. How could we add event listener to the html that are not provided in return statement of the component? ( let's say , they are randomly generated ).
@@jherr I am doing a project where server fetches the md files from the GitHub and convert them to HTML string and send it to the client and I am trying to embed them either using InnerHTML package or directly setting it as InnerHTML content of existing div tag
@@jherr yeah but again , we can't add event listener to those tags that are set inside dangerously set InnerHTML right sir? So I had to manipulate DOM directly once it has been rendered. Is there any alternative way?
@@vigneshwarrv You're right, and in that circumstance it's fine. The point of this video was to make sure that folks are using React properly to manage DOM nodes and event listeners when React has the capacity to do that. That doesn't mean however that there are no circumstances under which you'll need to manage your own event listeners. They just aren't that common.
I guess I have been lucky. Had never seen anything like that in over 5 years. On the other hand I have seen some crazy shit with hooks (since they came out) for sure 😂
It's pretty hard to call 142Kb of JS anything other than a "framework". :) But I think if I had to be more objective about it, it was never a pure "view library" since it always managed state. But it really transitioned into a framework, IMHO, when hooks were added. That embedded a state management solution in the library.
@@jherr Oh yeah, ha I totally agree. It's just funny how long they played this odd semantic game of "It's not a framework, it's a library". Great content by the way!
Better idea: write vanilla JS and ditch the ancient and bloated React. But thanks for saying "React developer" instead of pretending that people who only know React are "front end developers". I think it's awesome that you admit that devs have to unlearn how the browser really works so that they can speak "React" to Meta's code they've interposed between their code and the browser. Sad, yes. But that's what "React developers" really do. And if you suggest to them that there is a better way, they freak out. They don't know how to program user agent code. That's long gone. They only know React. They don't work on the Web. They work on Meta.
I'm seeing it more often now, and I think it's because these turbo code schools go so fast that people just assume that the should still be using the skills they learned just a couple weeks before they started learning React.
Didn't I absolutely destroy your argument in your other video about how state updates ARE ASYNCHRONOUS? I'm surprised you got back into making react videos after that. You're one that can't be reasoned with. Good luck churning bad videos, I guess.
If the state setter is asynchronous then why do we see this effect? ``` const onClick = () => { console.log(`Original count: ${count}`); // Shows "Original count: 0" setCount(count + 1); // Synchronously adds one to the count value stored in the hook data associated with this instance of the component setCount((count) => { console.log(`Updated count: ${count}`); // Shows "Updated count: 1" return count; // A no-op because the value is the same }); } ```
Jack, your videos and also the COMMENTS on your videos are some of the best in the web dev community. The mantra I usually take when watching a RUclips tutorial is, “go to the comments” because often that’s where the real nuggets of wisdom are. With your videos, the comments always seem to supplement what you are saying and it’s all just one big nugget together.
You’ve cultivated a great community here, and I get so much value from it. Thanks to you, and to all the commenters.
Sadly, once performance takes the priority, this is often the only way to do it.
Any libraries that work with DOM animations and handling drawing and user input need to eject from react's "re-render on state change" loop as it just doesn't provide the capabilities required. Tracking mouse movements on a 120hz display in a state means that there is a setState triggered once every 8ms. Dragging nodes with this approach is a recipe for disaster.
At one point, even Atom was running React, and they had to eject.
Framer Motion, react-spring, virtual scrolling libraries, whiteboard / node based tools, and even many state managers use React simply as "keyframes", while the work being done between them is done outside of React.
Yeah, there is definitely a case at the high end for going back to direct DOM access. But that's not where I'm seeing this. I'm seeing this at the starting level where people are taking the skills they learned previously in school and they are applying them to React. Which seems like an obvious thing to do, but is wrong in the most basic cases.
@@jherr yep that's definitely the case which you covered. I was trying to be the devil's advocate and bring some nuance:)
@@punio4 Nuance away! I always appreciate these awesome comments!
Animation for frame by frame capture, dragging behaviors should not bind to state except "the end result of those actions" afaik.
They belong to uncontrolled components.
Fast scrolling usually requires you to implement some sort of debounce functions, this is same for vanilla JavaScript.
The main problem is that nowadays many devs are being extremely lazy, they just want to learn one thing, and use the same thing or same library everywhere for the rest of 20 years, with the high salary, yet they refused to accept those new subtle differences, the limitation, and the workaround. Then they blame the tool (React for example) they are using is being lame. That's what scares me.
Thank you that you covered this in the right way of
"Are you tired of getting all of those HTML elements via JS, directly changing the DOM and keep it in sync with data via triggering the events? And are you tired of massive code duplication and correctly managing IDs in order to not break the logic simply because of changed selectors?. This is why React was created"
and not in some technology-hype way, which is popular unfortunetly.
I think that in this era of development, React (or any other reactive UI framework/library) became so obvious choice and requirement to know, that beginners have almost no way of understanding all the problems React solves, simply because they didn't have a chance to see how writing reactive UIs looked like some time ago with JQuery days, where you needed to deal with this selectors hell. So giving proper context is always a key for beginners to deeply understand of what React is and what it does and why
Thank you Jack again for another awesome video
Exactly!!! I totally get that having not gone through the pain that was state-sync with jQuery/etc. it's hard to really understand WHY we use React. And unless you understand WHY React exists, it's easy to misuse it.
Did you encounter people writing React that way except for dealing with vanilla libraries ? That's some madness, nice video as always !
I've seen this stuff in real production code.
I worked on a react on rails app once that had react code like this everywhere. It was like the developers lived in a cave for the last 5 years. I took over the FE department, and re-wrote the entire thing over 2 months. Didn’t even bother refactoring, nuking it into orbit was the only option.
@@thesunabsolute Some managers told them to switch to react because it was the new hot thing and they just executed without even reading the basic docs ?
@@MrKeepItTrill Hello Cje
@@sidwebworks9871 hi sid :)
That was totally what my first "React" apps looked like. Before I understood "the react way" I was basically just shoehorning in basic JS to get the job done. Another good intro video!
Typically a lot of "bad" examples I see are overblown or something and outright wrong, like no one would actually do it that way. But this is definitely one of the few times where the "obviously bad" example is real, and I've actually seen this in the wild. If people actually wanted to write it this way with the convenience of reusable components, just use a template service like EJS.
I've seen bad examples of this not just here but in Vue as well, but usually that's some idiot developer who was creating a WordPress template and thought it would be ok to use direct DOM manipulation because anything goes in WordPress 😒.
Hey Jack! This was one of the best videos according to me. Helped me immensely in understanding the fundamentals just by watching it. Thanks a tonne for the great job 👍🏻🙌🏻
Thank you. Every video always has some person for whom it really works. And that's why I keep doing this.
@@jherr Yes, I totally agree with you and I truly appreciate your efforts in sharing your knowledge with others. Means a lot, thank you!! 😊
Thank you! Your videos are always inspiring!
Hi Jack. Thank you for the great content as always. Your state management and react content really makes difference for web development community.
What do you think about doing video about dependency injection (using react context/provider or some third party libraries) and singletons approach to ensure only one store instance when injecting it?
It's just a personal thing, but I'm not big on DI.
Thank you for this video sir! Your videos always help me to learn React even in-depth.
Great video as always! I'm not the perfect coder by ANY stretch of the imagination though I'm surprised to see many people in the comments saying they used to do this!!
Hey Jack! I have a question about nextjs13. I want to load Server Components inside the app folder dynamically. My prevoius approach was to import all my Components into an array and call them. Now its not possible. You maybe could make a video, how I could render Server components dynamically. Maybe like components=[„comp1“, „comp2“…] loop through this array and render it. But all inside the new nextjs13 folder :D
Would be great!!!
Why would you do that? We load code dynamically on the client because we want to reduce bundle sizes going out to the client. That's not a concern on the server.
@@jherr Uhm maybe I have to explain my comment a bit more. We developed our own CMS System which works headless. So I started to work inside the pages directory and used the getServerSideProps function. I thought it should render my page on the server and ships the html to the client and thats it. But I still get a CLS (Column Layout shift). I get these CLS on a Component which is totally free of functions but it seems like thats its still rendered on client. And I dont get why?!
Now I have to explain why I load the components into an array. First of all, on our CMS you can build a Page. You have pre built componets which you can add/remove or reorder. So I get the JSON where the app could see how the page is buitl with wich content and so on.
Now I thought NextJS13 is my game change and I can deliver REAL Server Reendered pages. I need this server rendered pages cause we need a pagespeed above 95 to be competetive to the seo wars on google :D
Sorry for my Bad English I hope u understand my problem and my intentions
@@TheVioArtsofficial I'm not understanding 100% but from what I'm getting you get some content from the CMS and pick out a bunch of components to render that content from what you see in that CMS content. Totally cool. What I would do is have a lookup table that has whatever key you are expecting from the CMS and the component that is used to render it. Then you just get the component for that key and use it to render. You don't have to do dynamic imports to do that.
@@jherr yeah right! When I do this in the pages folder everything is fine. But its still not rendered SSR. Now I thought NextJS13 will do the job with, but its not working :D It feels like you cant import React Server Comps dynamically.
@@TheVioArtsofficial Can you be more specific around what "dynamically" means. To me that means `import()` or `require()`. If so, yeah, NextJS 13 is not going to treat that as an RSC.
I love your videos so much, cheers from Poland :)
Stop writing fake react code. Use useCallback rather than inlining your callback on line 10 with onClick. You create a new callback each render. Don't do that. Also: use setCount(oldCount => oldCount + 1) as your useCallback function. Beginners....
Fantastic video Jack, always enjoy your content.
Great demonstration of these core concepts of React. Thanks a lot Jack!
Surprised someone wrote that but I guess each dev started their journey from a different place. Thanks for sharing.
i was listening to this, sort of as background noise while i did other things, and had to stop what I was doing when I noticed the console log showing up in the IDE next to the line of code!!! I involuntarily started to salivate like a dog that hasn't eaten and was just shown a fat juicy steak.
That's Console Ninja. It's great.
How do we extract all hyper links in page which are having external link of site? In this case do we need to have vanilla js for finding tags and manipulate when those are rendered from content apis, please suggest
Do you not control the creation of the links? Wherever you create a link just check the URL it's point to and alter it to suit. I would DEFINITELY NOT search across all the links and change them in the portion of the DOM that React controls.
We dont control the link, just assume entire content will be loaded from content server, At react end, we just sanitize them and feed into component. those link will be populated from content server, we dont alter it, Now i want to have speedbump whenever those links clicked on, can you suggest how we can bring in react way?
@@barakkath Before you inject the HTML into the page use regexes to add the speedbumps to the links.
Awesome suggestion! You are the best!
I recently had to detect clicks outside of a component, there weren't easy options other than having a ref, then a useEffect to create an event listener to check whether the target was the ref (component) or not (outside).
If you search for "React detect click outside component" it's the first stackoverflow link.
Wondering if there are better solutions.
That's certainly a decent use case for using a custom event handler that is not supported by React. This video was about trying to ensure that folks aren't writing and manually wiring event handlers for events that React does cover.
Thanks for raising this concern. Great video.
Learned valuable things here.
Thanks!
Great Jack , waiting to see more content from you
I think using HTML is misleading, HTML is just a string/text that it is interpreted by the browser. The result of this is the DOM.
React works with the DOM, you tell React what the UI is to be, and React-DOM manipulates the DOM accordingly. That is why the props on primitive components (div, span, h1) are different from HTML attributes. e.g. 'class' attribute, in the DOM is 'className'
You can talk about turning it into HTML, but only when you are talking about server-side rendering.
the title is 100% accurate
2 videos in a single week? it really is Christmas
we should use manual event listeners only for document/window?
That's a decent rule to live by. If React created the element, React should be the one adding the event listeners. And in the case of document and window, React definitely did not create those.
Very nice sum up - React is 50% state management and 50% DOM management.
for the setCount, it's better to write setCount(c => c+1), isn't?
Not IMHO. The value of count will be up to date because the callback closure set to onClick is regenerated during ever re-render. So no need to use the callback variant of the state setter.
The callback variant is best used when you are calling the state setter within a potentially stale callback function. For example, inside of a useEffect callback that was registered onLoad and isn't re-registered and re-run on every render.
POV: I thing it is happening only because as new react developer switching from manual DOM changing mindset to declarative mental modal of React. Sometime I think although React is library we need constraint of framework to build big complex app. So rather build that mental state how react works and go accordingly or use other framework and not to worry at all but there you have to do what framework telling you to do rather than flexible like React. Correct me If I am wrong.
If your point is to not work against the framework, and to let the framework work for you, then I completely agree.
@@jherr Yeah that is my point. React has so much to give but it up to us how we are taking it. And at the end no matter what the technology it is, but not following the best practices or standard it is not going to help us at all. 🙌🙌
Yah but onClick setCount seems to have a problem. It should be `setCount((prev) => prev + 1)` instead
It actually doesn't matter in this case because the () => setCount(count + 1) closure is created with the current value of count. () => setCount(p => p + 1) is valuable when the callback closure could potentially be stale.
@@jherr In case you have something else on the page that fills the event queue and delays your clicks, you could have such "stale" closure and your multiple clicks will all set the counter to the same value, whereas with the callback version every single click will increment the counter.
So as a rule of thumb, always use the callback version if the setter when the next value depends on the previous one.
@@ThomasBroyer That's the best argument I've heard for it. Though it seems to me that it would only apply to shared state through context, or a global state manager. In which case I would very much agree with the callback version, or whatever dispatching mechanism your state manager supports.
@@jherr Why would it not apply for this simple counter component? (when used on a page with many more things messing around) As soon as you have some long task blocking the main thread or something firing many events, delaying the click events, there's a risk. The counter component cannot know the page context it'll run in.
@@ThomasBroyer Fair. First, I've never actually seen this in production. But I do acknowledge that it is a possibility. That being said, in the circumstance where this is a normal behavior (which would be bad in and of itself) there is a question about what the correct behavior is. If the counter is currently at two, and the user clicks the button, which says "2", and the application is blocking, so the user rage clicks, should it go to "3" when the re-render finally happens, or go to some bigger number they never saw?
Hi, Jack. I'm currently creating a rich text editor in react for my portfolio, to get my first job. I've found that react don't have solution for handling contentEditable elements with react state init. That's why i was forced to use plain js inside react. What do you think about exceptions like that? Have a nice day :)
I think that's fine. If React can't handle it directly then sure, go for it. I'm just trying to make sure that people use React when React can do it.
Hey Jack. I've heard the argument of using vanilla js in places where it's more performant then using react. Any comments/thoughts on that?
React is really performant. I think if you get to the point where you have a verifiable performance issue that isn't just a bug, like too many top-level updates that should just be fixed, then maybe you can go to hand tweaking DOM elements using refs. But I've done fast animations using straight React and the perf was fine.
You're paying 142Kb to put React onto the page. You should make the effort to get every ounce of out of that 142Kb you can. Or switch to Solid or Svelte, where you don't pay that overhead. But I think putting React on the page and then actively fighting against it regularly is silly.
Hi Jack, whats extension you use for console.log(count) x7 blabla? thanks
Console Ninja. You can install it today. They've said they will enable it for alpha in the coming weeks. Frustrating I know. It's super cool.
Hello Jack, first of all thank you for your great videos, keep i going! :)
What if we have a specific scenario where we need to create custom hook to catch onScroll event listener on some div container?
What to use instead of addEventListener to the passed reference?
Maybe create one video regarding that?
Thanks!
That's of course fine because you are in a custom hook. Just remember to remove the event listener when the ref changes.
The point of this video was to make sure that folks who are transitioning from learning DOM development to learning React development don't think they are done when they use React components like templates and do all the rest of the work with the DOM skills they just learned. If they are writing custom hooks then they are well past that level of issue.
@@jherr thanks for quick response, will use cleanup function.
Once again thanks for helpful videos!
I've switched to writing vanilla component classes in a react / Vue mentality.
The underlying mechanics of React, so beautifully explained. Thanks, Jack
{2022-12-03}
If someone writes "React" code like this then they clearly haven't done even the simplest of tutorials
Yeah, exactly. And not only do they need to do the tutorial, they have to shut off their DOM brain and just stick to the React script entirely.
I'll disagree with rule #2
I do think you need to pass an id to elements in some scanrios like ur using the name attribute while building forms
Sure, when HTML requires an ID for labels or accessibility then sure, I agree as well. Use IDs for CSS or HTML reasons, but not for JavaScript reasons.
@@jherr Agree, I've used it to managed styling for selected items in collection so I've stored in some state the selected id's and used styled components to wrap each item and accept the "selected" prop and by doing so the item component it self wasn't aware of the selection state (SRP) do you think it's a legit way for using the id attr?
@@golansoffer6538 I don't quite follow but it could be cool. I'd love to see it. If you could do a simple codesandbox to demonstrate the approach that would be awesome.
I want to say "who the hell does this?!"
But I'm sure there are people who do.
that's the main reason why tons of "react" website on the market are so terrible. There are so many times I saw a react website where every single action will re-render the entire page. Why bother using React if you implemented everything in a traditional MFA(multiple page application)?
Your two hours course on freecode camp on hooks took me around two days to digest it amazing content
alot of value thanks
Well, it took me near two months to develop and produce it, so... that kinda fits. ;)
Thanks for that video. Do have any courses on Udemy?
I think I have a very old one on Vue. But nothing recent. Honestly, I'm not a big fan of putting stuff behind pay-walls. I'd rather just get paid by ads and put out the content for free to folks.
@jherr thank you for your very helpful and insightful videos. I am in Nigeira was recently hired as a react engineer by a company in the UK. How do you advice I level up, I'm within junior - intermediate level, I want to become really good and valuable. How do I level up. my react knowledge in general. Thank you
I'd watch my Freecodecamp state management video that just came out. It's a really in-depth look into every level of state management in React.
@@jherr I'll go watch it ASAP and also give you some feedback on what I learnt, what parts also that weren't very clear to me
It's hard to believe that there could be someone who would write such code in React ;D
What are you using for call tracking etc. as in-editor annotations? I use Quokka Pro a lot on my pure-JS explainers but that seems useful on many levels!
Maybe Code Ninja?
@@jherr hey thx for replying! Like at 06:51 (the whole " × 3 ⌛0⌛6" thing), this is done inline in your VS Code by a "Code Ninja" ext? Can't seem to find anything by that name online except a NoCode platform.
@@christopheporteneuvepro My bad, Console Ninja marketplace.visualstudio.com/items?itemName=WallabyJs.console-ninja
@@jherr Got it, thanks! Another tool by Wallaby.js, sort of a slimmed-down version of Quokka. Although Quokka sure could do that too, it would be way too verbose on other lines for this.
Incidentally I hadn't quite noticed this was a console.log call, my mind's eye had seen the annotations right next to the useState() call, so it felt React-specific.
Thanks anyway, keep up the great work!
@@christopheporteneuvepro I kinda get the Quokka comparison. But Quokka means firing up a sheet that isn't integrated into the application and seeing the output there. This shows the output of the running application in place. Which is way better. It also shows runtime errors in place. Which is honestly even cooler. ruclips.net/video/bmKDT-yG2eE/видео.html
Curiosity: sometimes it's not better write vanillaJS to solve simple task than give it to react and have to handle state Managements and stuff?
One example: I found out that was way easier implement a pop-up or alert component with vanillaJs than through react. In react you gonna have to handle global states, memorization... With Vanilla you simply add and remove a block of html out of react block.
Just saying cuz I saw people doing all the sorts of things through react nowadays, and some of them it's easier with Vanilla.
Fair enough. Sometimes React is way overkill.
React is definitely better when you have a more complex application and it owns every part of it.
If, on the other hand, you have a simple website with popup window, it's definitely overkill.
That being said, you can use React's Portals feature to handle HTML elements outside of the React root, but still have it share the same state (so, use the component wherever you like in your tree, pass props for open/close state, etc, but still have it render and update HTML elsewhere)
@1:08 I thought that mixing vanilla-js and react is lvl +99 of expertise 🙃!
I see this pattern a lot when trying to work on top of legacy projects/libraries,
(PS: I used that while working with Threejs library !)
Well, threejs is full on GL stuff, so yeah, you will need to use a lot of DOM/direct stuff with that.
Hi console ninja (vs code extension) is not installing it saying error it cannot install and cannot compatible with vscode version 1.58.2 version (please tell the solution how to get it)
I'm not affiliated with that company, nor do I do technical support for it. So this sounds like a good question for them. That being said I looked at my VS Code version and it's 1.78.x. So perhaps you should upgrade.
what is the extension to show the console log result?
Console Ninja
Anyone knows how does Jack's autocomplete seems to know what to write? Is that Github Copilot?
It is GitHub Copilot.
Cool thanks 👍🏻
Lool.. I see this too often... Solving react problems using Vanilla.js. But i am not woried about vanilla code in React, i am woried about people doesnt know vanilla and starting to use React first. Thats one hell of a mess in their brain.
This nope seems like a I've seen somewhere, oh you won't believe, I just finished watching this amazing movie 🍿😃
Thanks for your valuable lesson
Hi jack nice video ,one que console ninja is not working when I installed any idea my friend.
I don't know man, they still haven't released it. :( Last I heard a couple weeks back it would be going into alpha release soon. I really jumped the gun on that video. Sorry about that. It'll be worth it when it comes out though, I promise!
@@jherr thanx for answering jack.
To this day I still don't understand why people use the term "vanilla" to refer to native JavaScript.
Me neither, but it seems to be an accepted thing.
It’s a term commonly used to mean “plain” or “basic” so in this case it means plain JavaScript . The term came from ice cream flavours as vanilla ice cream is so widely popular it is often considered the plain or basic flavour.
hello jack from vietnam, can you show me extention to console.log inline vs code . please !
It's called Console Ninja.
Question about using ID in jsx. Is it ok to use it in components to implement smooth scroll on a single page ( when not using react router)? Is there a better alternative?
If what you need is a reference to an HTML element to scroll it into view use useRef.
hey Jack,What is the name of the plugin for log?😄
Console Ninja from Wallaby.
Back to basics ;) nice one.
should't you use ids on list elements?
No, use the key property. React doesn't care about IDs.
@@jherr oh yeah, I've mistaken :)
Do you think AI will replace web developers
I think it will automate some more mundane tasks, like Copilot. But you'll still need a human to make sure that it is structured and written well. Just like Copilot. Copilot can write some shockingly bad code, that still works, and it takes experience and skill to understand that.
@@jherr thanks I would really love it if you mad a video for everyone else on this iv actually spent the last six months learning an am just about to finish my portfolio website
@@Chris-gz4ie ruclips.net/video/7I-CY1a-Jpk/видео.html
Thanks Jack, I liked your video much and your teaching is very good and I learned from you a lot. But react state actually gives a performance issue for large scale app.
I hear this a lot; "This won't work for large scale apps." "This doesn't scale." "How does this scale?" Unless you have specific concerns that you can express in engineering terms I don't take that as a credible reason to actively undermine a framework as shown in this video.
I've never seen a performance issue in React that was caused by a fundamental issue in the framework. It has always been the application code that was poorly written. Poorly performing code can be written in any framework, including Solid-JS, Vue, Qwik, etc.
You have seen someone doing this?
Yep.
@@jherr oh that poor tortured soul 😬
Actually using id's is useful if you need to force rerender a component. Just FYI.
Key is better for that.
@@jherr OOPS you are correct Jedi Master~!
I'm disgusted to know that people use React like this. How can you pass over the state management? It's basically the first thing in every tutorial
Hi Jack, I got a doubt again here. How could we add event listener to the html that are not provided in return statement of the component? ( let's say , they are randomly generated ).
Can you give an actual realistic practical example?
@@jherr I am doing a project where server fetches the md files from the GitHub and convert them to HTML string and send it to the client and I am trying to embed them either using InnerHTML package or directly setting it as InnerHTML content of existing div tag
@@vigneshwarrv For that you should use dangerouslysetinnerhtml reactjs.org/docs/dom-elements.html#dangerouslysetinnerhtml .
@@jherr yeah but again , we can't add event listener to those tags that are set inside dangerously set InnerHTML right sir? So I had to manipulate DOM directly once it has been rendered. Is there any alternative way?
@@vigneshwarrv You're right, and in that circumstance it's fine. The point of this video was to make sure that folks are using React properly to manage DOM nodes and event listeners when React has the capacity to do that. That doesn't mean however that there are no circumstances under which you'll need to manage your own event listeners. They just aren't that common.
Yea just use the Shadow DOM people, with a cool name like that why wouldn't you?
I guess I have been lucky. Had never seen anything like that in over 5 years. On the other hand I have seen some crazy shit with hooks (since they came out) for sure 😂
Oh, that I see all the time. I really should just do a "hooks f-ups" video.
I just vomited into my own mouth
fake react code is jsx not tsx...
nice !
Oh, my eyes! my eyes! 🙈🙈🙈🙈
I remember some source code I saw that it was using jquery and read the inner state of the component by ref :))))
Ooooo, ouch, Yeah, that's not good.
Shit. I just wrote this
Wait, you just called React a framework. I thought it was just a view library? This is what I hate about React. It's lying to me about what it is.
It's pretty hard to call 142Kb of JS anything other than a "framework". :) But I think if I had to be more objective about it, it was never a pure "view library" since it always managed state. But it really transitioned into a framework, IMHO, when hooks were added. That embedded a state management solution in the library.
@@jherr Oh yeah, ha I totally agree. It's just funny how long they played this odd semantic game of "It's not a framework, it's a library".
Great content by the way!
I hardly believe someone uses react this way😅
Would I hire a developer that codes like this -- nope 😂. Had me dead dunno why.
Brad Pitt man. He's the best. Great movie.
Arent you too old for programming in React?
No.
All React code is fake code
LOL, Stop saying what people should do.
I'm first
Better idea: write vanilla JS and ditch the ancient and bloated React. But thanks for saying "React developer" instead of pretending that people who only know React are "front end developers". I think it's awesome that you admit that devs have to unlearn how the browser really works so that they can speak "React" to Meta's code they've interposed between their code and the browser. Sad, yes. But that's what "React developers" really do. And if you suggest to them that there is a better way, they freak out. They don't know how to program user agent code. That's long gone. They only know React. They don't work on the Web. They work on Meta.
I never seen anyone making this mistakes so this video seems quite unnecessary... Pretty obvious stuff.
I'm seeing it more often now, and I think it's because these turbo code schools go so fast that people just assume that the should still be using the skills they learned just a couple weeks before they started learning React.
@@jherr Woah. I'm surprised by that.
Didn't I absolutely destroy your argument in your other video about how state updates ARE ASYNCHRONOUS? I'm surprised you got back into making react videos after that. You're one that can't be reasoned with. Good luck churning bad videos, I guess.
If the state setter is asynchronous then why do we see this effect?
```
const onClick = () => {
console.log(`Original count: ${count}`); // Shows "Original count: 0"
setCount(count + 1); // Synchronously adds one to the count value stored in the hook data associated with this instance of the component
setCount((count) => {
console.log(`Updated count: ${count}`); // Shows "Updated count: 1"
return count; // A no-op because the value is the same
});
}
```