Stop Doing this as a React Developer
ฝัง
- เผยแพร่เมื่อ 31 พ.ค. 2024
- Javascript is a weird language and since it chooses a different path than other programming languages like C++ or Python it still has plenty of cool features we don't know about!
So in this video, we'll explore some bad habits and mistakes we make as React developers and what's the best practice in order to avoid them, like doing conditional rendering wrong, not using debounce for API calls, or not knowing what forward refs is!
⭐ Timestamps ⭐
00:00 Intro
00:15 Conditional Rendering (&&)
03:37 Debouncing
09:56 Forward Refs
⚡️React Stop Doing This Repo
github.com/ipenywis/react-sto...
-- Special Links
✨ Join Figma for Free and start designing now!
psxid.figma.com/69wr7zzb1mxm
👉 ✨ Join Figma For Professionals And Start Designing with your Team ✨
psxid.figma.com/ucwkx28d18fo-...
🧭 Build Login/Register API Server w/ Authentication | JWT Express AUTH using Passport.JS and Sequelize
• Build Login/Register A...
🧭 Turn Design into React Code | From prototype to Full website in no time
• Turn Design into React...
🧭 Watch Tutorial on Designing the website on Figma
• I Design a onecolor We...
🧭 Watch Create a Modern React Login/Register Form with smooth Animations
• Create a Modern React ...
🧭 Debug React Apps Like a Pro | Master Debugging from Zero to Hero with Chrome DevTools
• Debug React Apps Like ...
🧭 Master React Like Pro w/ Redux, Typescript, and GraphQL | Beginner to Advanced in React
• Master React Like Pro ...
🧭 Learn Redux For Beginners | React Redux from Zero To Hero to build a real-world app
• Debug React Apps Like ...
🧭 Introduction to GraphQL with Apollo and React
• Introduction to GraphQ...
🐦 Follow me on Twitter: / ipenywis
💻 Github Profile: github.com/ipenywis
Made with 💗 by Coderone
![[TH] VCT Masters Shanghai Playoffs DAY 1 // 100T vs FUT | FNC vs GEN](http://i.ytimg.com/vi/erQ7pGChzxA/mqdefault.jpg)
![[TH] VCT Masters Shanghai Playoffs DAY 1 // 100T vs FUT | FNC vs GEN](/img/tr.png)
That's why some of us strictly use TypeScript.
Yep
Doesn’t TS only check at compile time? If you fetch data from an API, TS cant know the data was a wrong type
@@johndoe-eu4ol There is GraphQL to share the type signature with the client. Going one step further there is tRPC for end to end type safety.
I think the point he’s making is that this way of using conditional rendering can potentially render something that is not guaranteed to be a Boolean.
Those solutions are definitely great for type safety when you own the full stack, but what if you don’t own the server you are making calls to?
Exactly. Use TypeScript. The bugs the creator describes are bugs due to not using a type system. Which is a big no no for logic.
The first one is incorrect… conditional rendering is not problematic in good code.
Oh it can be if you use a numeric value, it'll attempt to illegally render the number 0 for instance. You can of course use a double bang.
He could’ve used the Boolean(showWinning) function object instead, much cleaner and easier to understand.
I discovered it as a problem with a third party controls children where it crashed on undefined controls. I’ve changed the hidden child controls to render as null to fix the code.
I'd argue that ternary is worse than conditional rendering. Maybe not in this the very example you're showing as it's one thing OR another, but in most cases if you just want render a single component conditionally then use... conditional rendering.
It's not that hard not to assume the response of an API call and make sure to get a boolean anyway.
I was a bit annoyed him calling it a MISTAKE, it's kinda clickbaity tbh
@@daliovic24 I was gonna say the same thing and you two save e the time. thanks
😂 agreed
using && is worse then ternary for rendering, for cases when you have an if else its for obvious reasons, but when you render a single component you suddenly switching syntax? if you can keep you syntax consistent, do it, its gonna be more readable that way.
and I mean, with && your basically saying "I want to render the result of X AND Component", which works how you intend it too cause JS is weird but you realize how your statement is not what you actually wanna do right? meanwhile with ternary what your saying is "if X I want to render Component, else I want to render nothing" which is exactly what your trying to achieve
I know I wouldn't pass a cr if I saw someone using && for rendering as in my eyes, its less readable and shows a misunderstanding of what the language is doing, and we shouldn't base our code on misunderstandings of the language if we can help it
@@user-so2iw2mr5g you use another syntax because you're not doing the same damn thing.
I disagree with the conditional rendering part - Using && is cleaner and easier. If the coder is using something other than a boolean, that's a bad coder that's not doing things the right way. The way we code shouldn't change because some devs don't know what a boolean is. 😛
Right . I agree
That's true, with ternary u can't use wrappers.
@@RaZziaN1 elaborate please
Also with typescript (which you should be using) it's a lot easier to ensure that your booleans are actually booleans.
This is the correct answer, the only time something ‘unexpected’ happens is when the value ‘unexpectedly’ doesn’t act like a Boolean like the dev was hoping.
1. Use TS + tRPC to ensure you have type safety.
2. Use AbortSignal to invalidate previous requests when a new character is input. Much simpler.
I haven't seen an abort controller in a long time. Think people just don't know that something like that is a thing.
@@Voldrog yeah, I wonder why this isn't a more widespread knowledge.
Abort signal is a good decision but it doesn't reduce amount of api requests
2. It sends the same amount of requests, basically after every single keystroke. Doesn't solve the problem.
Exactly. And for the first one I will add also to use triple equality. eg: showWinning === true
I use lots of non-booleans in conditional rendering, but I always wrap them in `Boolean(data) && ( )`. It's the same as a double negation (!!data) but I find it more readable despite being a little longer. I dislike mixing lots of syntax symbols because a minor change in those symbols can have a big difference in the outcome, hence I prefer the very explicit Boolean() cast.
However, lately I've taken inspiration from Solid and been using a ` ` component, since I find that to the most readable of all.
umm yea that could be another way but that implies having tons of components
I'm curious. Why not just double-negate your condition? Should be much easier to parse through your code. Ternary condition kinda looks awkward in JSX.
Please correct me if I'm wrong.
For autocomplete, throttling makes way more sense than debouncing, and you can make the case for having a combination of both debouncing and throttling. When it comes to conditional rendering, you're just completely wrong, each way has its use case, and developers should know the pitfalls of something before using it.
this
This x2
I did an autocomplete yesterday and I used throttling during writing, and debouncing to make sure that after user stopped typing the last search value is fetched
The && for conditional rendering is in most cases the better solution, because a ternary operator returning null is unnecessary code
I got the general concept of a debounce but found the code a little confusing - I'll figure it out i guess. And thanks for the forwardRef overview, I haven't had to use this yet but it will be handy to know when I eventually need it.
Some great tips here! been a react dev for about a year now and I feel comfortable enough with the framework for sure, but you made me rethink again what I know best-practice-wise, and THANKS YOU for that!!
Hey can you tell me which file icon you were using?
One quick question: What is the vsc theme?
Debounce good thinking this could really smooth things for my app project. PS: Really like the duality when sharing good code to better coding.
I recently made another alternative to debouncing issue. It's technique to determine if user has copy and pasted value or actually typing value by calculating change of input text length. If user is typing user has explicitly need to click a button but if user has pasted value it will automatically trigger search function.
Like others have said, the first example is not necessarily the best solution. The only issue is if the value being evaluated is a boolean. In your own example, you cast one of the values as a Boolean !showValue (or whatever it was). You could do the same thing above !!showValue
that's introducing unnecessary extra processing though, sure its not much but this things add up so why not just not add them in the first place if you can help it? casting tends to be an expensive action (though admittedly I'm not sure how expensive it is in JS, didn't check)
@@user-so2iw2mr5g I'm not sure off the top of my head either, but I'd wager it is less than a tertiary which has to evaluate if the value is truthy or not any way
I mean, just like the tertiary the !!cast also has to evaluate if the value is truthy or not, hell they probebly use the same function behind the scenes to do this, its just thatbwith !! It has to call it twice while with tertiary it has to call it once, so theres that.
In short, even though the savings in performance are admittedly, negliegble in most cases, if i had to put money on which is faster id go with tertiary
The again there might be some kind of optimization baked into the language that somehow makes !! faster
what is vscode theme?
Imo its much better to avoid if statements overal in jsx and simply make an early return statement. If you end up with double jsx code, then it means that you havent properly split your components
If you actually have an if+else condition in rendering, going for ternary operators (?:) is also my preferred way, but if your else is just "render nothing", so "condition ? something : null", going for "condition && something" is totally fine and also my preferred way.
If your condition can be a falsy value that gets rendered by react (e.g. 0), just put a !! in front of it so parse it boolean. It's not a bad thing to do so.
If you are scared of bugs changing your condition's type, this is not the right spot to fix it. You should generally always parse incoming data from a third party (an api, user input, etc.). You could use libs like Zod for that.
But taking that as a reason to not use && or || operators is a weird way to think imo
Another piece of information Thank you so much.
03:37 Debouncing
09:56 Forward Refs
Second problem - why not write usual debounce function except this hook??
Thanks for the forward ref explanation
Typescript identifies the boolean problem and makes surprises much less likely.
7:14 , can we use onBlur instead of onChage , hence when focus is lost from input, the fetching happen , rather than each key press
it would work, but you're describing a very non-standard user interaction and is guaranteed to confuse the user. If you're considering it on the blur event, might as well just put a button next to the input to perform the search. At least then the user will know they have to do something other than type to get the result.
using onBlur makes it not autocomplete anymore, user should always see results for what he currently has typed in the input. Throttling and debouncing is to reduce server fetches to the absolute minimum while still providing satisfying user experience.
what is your vscode theme?
If you're reading this pause at 4:20 and look at the code, avoid redundant if statements, render the null being passed in the first ternary operator should be replaced with the render in the second ternary operator and completely remove the second ternary operator you don't need a redundant if statement like that.
In React 18 they introduced useDeferredValue hook, you could use that instead of custom solution (which is absolutelly fine looking) if you already using newest version of React
please share the official documentation on that hook, or you mean a custom hook....
No they didn't, wtf?! I think you mean useDeferredValue which is similar but the same
@@und0 yes I meant exactly useDeferredValue 😅 I will fix it in my commit, sorry
I never had this problem cause when i started react, i also started using typescript
I'd prefer doing !!showWinning && ( ) or TS, I don't like that much ternary operator with large blocks, it's difficult to read. We can algo extract the blocks to variables and then use the ternary op.
Great video! Which theme do you use in VSC?
I would like to know either
Halcyon ^_^
@@CoderOne Thanks! Keep going with this type of content
Thanks a lot. I thinking about conditional rendering: IMHO the best is create function, like renderSomethink, and inside this function return some part of jsx in conditional case
const renderSomethink = () => {
if (flag) {
return (aaa)
}
return bbb
};
return (
{renderSomethink()}
)
ternary operators (?:) in jsx template it is terrible practice
It seems that use useRef for debounceValue instead of useState in useDebounce is much better, because it reduces the times of re-render
That's why everyone uses typescript. Boolean && is just fine, keep using it
May i know the theme name?
Great explanation. Thank u
Related to first mistake
Is better to convert inputvalue to boolean by !!
or is it still not good solution?
casting solves the problem if the type is number or unary of number and other types. Using TypeScript you can choose to cast only when the type can be number so that is the ultimate solution
@@und0 Of course, but the variable is showWinning. Based on name it should be boolean adn it should be defined as boolean
isn't just using foo && bar just fine, as even the mozilla docs says it's to check if it can be converted to false, and that it's a perfectly fine way to check if your variable or function even exists at call time
For deboucing we could also use useDeferredValue. This will ensure high performance for larger data
const [value, setValue] = useState("");
const [data, setData] = useState([]);
const deferredData = useDeferredValue(data);
useEffect(() => {
const id = setTimeout(() => fetch("/data").then(setData), 300);
return () => clearTimeout(id)
}, [value])
return (
setValue(e.target.value)} />
);
Experimental
@@victormog No, it's not. It's stable since React 18.
@@grenadier4702 Ok!
hey man, I finally understand how forwardRef works!
Thank you so much!
I also much prefer the && condition over a ternary when you don't have a fallback. Just make sure to cast to a boolean first. If I see && I know I am conditionally rendering something. If I see a ternary I know I am conditionally rendering and I should expect a fallback template after. Not just null.
Instead of {x ? a : null}{!x ? b : null} you can write {x ? a : b}. Instead of ref={ref} value={value} onChange={onChange} you can write {...{ ref, value, onChange }}. Just thought you might find that helpful.
why can't we prepare a value first and the apply a conditional rendering (for example with !! or Boolean())
Thank you... for qaulity content... debounce trick seems to be smooth.
Regarding conditional rendering, I feel better readability is achieved by placing the relevant HTML into a separate component and giving it a "visible" attribute. That will remove ANY related JavaScript from within the calling JSX/HTML.
3:50 put the bottom return as the false expression for the first ternary
One blogger stated that using ternary operators is bad practice, while another recommended that conditional rendering should return false instead of null. It's great that I can merge both recommendations.
However, it's unfortunate that the React documentation doesn't provide a comments answer on such small but useful tips.
Blogger 😂
Need more of this!
I tend to distrust videos with titles like "don't do this" or "stop doing this". They often present personal and opinionated arguments, leading viewers to believe they're on a completely wrong path.
does React Query handle the debouncing for you?
Your debounce does not solve another issue with async on user input. You set the state on resolve and don't check if the resolve is relevant to the user input. The order the asyncs are resolved are not guaranteed to be in the order the user input triggered them, debounce mediate that somewhat but doesn't eliminate it. I am not allowed to post the link to the code but if you are interested I can give it a try (yt keeps just nuking the comment if I try posting my github account or gist).
You just use '!!' To force null force coalescence.!!! For false.
4:16 sorry sir, I can't agree this approach is more readable. Less prone to errors - sure, but more readable - not at all.
Thanks 😊
For the first one - why not just say showWinning = Boolean(someVar) it will be safe enought to conditionally render. Better than writing ? : and nulls in my oppinion.
or use !! for converting to boolean
Thanks 🙏👍
Denounce is good, but for truly senior devs, you simply cache every idempotent iteration of whatever request makes sense to cache... if not almost all... So, just stop using lo-dash, have some balls and venture into cache re-validation, you will be really happy about all the errors you will introduce, get fired and find a better job as a consequence. Thank me later. (LOL)
I love how a lot of devs tends to search for convoluted solutions to problems TypeScript already solved years ago just for the novelty of not using it and look like a pro
Why are we all using && and not ?? (null coalescing)?
Two different use cases.
X ?? Y translates to “return Y if X is null/undefined, otherwise return X” while X && Y translates to “return Y if X is truthy, otherwise return X.”
He wants to return certain JSX only if the defined condition is truthy, basically meaning it has a value, but truthy does not just mean boolean “true.” This is the issue he speaks to in his first point, since everything that isn’t falsy is considered as truthy including non-zero numbers, non-empty strings, and “true” just to name a few.
His solution works, but is much more easily solved by ensuring that your condition only returns a boolean, therefore limiting your truthiness scope to one possible value of “true” and preventing other non-boolean truthy values from showing instead.
All in all, nullish coalescing (??) is more specific than logical AND (&&) since it’s only checking for null/undefined, but it is more commonly compared to logical OR (||) since it’s closer in functionality.
Knowing / allowing `showWinning` to be anything but a boolean IS the bug. Not the fact that 0 renders `0`.
Using a ternary just adds boilerplate code and isn't any clearer in my opinion.
It's a little bit like writing:
```
function isEven(value) {
if (value % 2 === 0) {
return true;
} else {
return false;
}
}
```
rather than:
```
const isEven = (value) => value % 2 === 0
```
in my opinion.
Why not use double ! to cast as a boolean? It's cleaner than a ternary.
You even showed the solution to the one very rare case when condition && something fails that being a !! operator, why make the code less readable by an ugly ternary expression?
Vs code theme?
double negation (wich always results in an actual boolean) is way quicker and safer than a ternary :
!!showWinning && ...
clear and valuable, appreciated.
why not just use the useeffect and grab the data once on mount
TS solves the issue of the conditional variable being a non boolean type. Use TS. It's 2022, everyone should be using TS.
First problem - just use TS!
honestly, your problem with conditional rendering made me cringe so hard. Francisco Barros replied in a comment earlier !!x && component, if in doubt double bang and you are sweet. Unreal how you are peddling this tripe to juniors.
interesting, thank you
Why not (showWinning === true) && ?
I'll keep this video on my heart... Thank you a Lot !!!
Totally disagree. It really depends on the situation and what you want to check for. If you don't need to check for the 'else' condition, using tenary operator to have a null as the 'else' is just writing extra boilerplate code for the sake of writing it.
In those situations it's better to just use &&
Typescript saves !
&& with array is 0 when length is 0
Amazing tips! Subscribed!
Both && and ternary ARE conditional operators. You’re kinda wrong on that first one
Tbh. I only watched for the first one. As it was a click bait. I agree that you should not use conditional rendering if you don't know what you are doing.. but other than that. And if you are really scared that you dont know what here is. you can use !! to convert it to boolean value
Conditional rendering works fine (per CoderOne) if you actually get a boolean. So the true issue is type checking and type safety, which you get automatically with TypeScript and .tsx files instead of .jsx files. This is poor advice, ignoring a glaring problem (not using TypeScript) in favor of focusing on an easily resolved glitch that would never escape dev testing.
You would expect the condition to actually return Boolean, so ternary operator is much less bug resilient. Just because in your case it shows what you want doesn’t mean it’s better. Btw ternary is to render one or the other thing, so why you made two conditions there? 😂 that looks so junior.
Why did you do: showWinning ? this : null and !showWinning ? that : null, you should have done showWinning ? this : that. Conditional rendering one element with && is fine but ternary for if else is more appropriate (or use if/else if you want to be more verbose).
Interesting content
yeah. the actual problem isn’t the notation. It’s non-experienced coders that write no tests and walk into wonderland. 🎉 won’t continue after first one, obviously targets non-programmers
Great tutorial, thank you!
Lol. If you end up receiving a 0 number from the BE, when you expect a boolean, how is that a React FE issue
That is why we should use TypeScript
wao, you vs**e looks like my neovim code editor, cool
&& easily solves by using TS :D
also stop doing:
1. useEffect cancer where logic is hidden in a chain of unreadable useEffect that could totally being done in a single async function
2. application logic scatter around in the entire hierarchy of component instead of being centralize at the root of the feature
for conditional rendering you could also just use `showWinning=== true && ()` or with a javascript typecheck `typeof showWinning === "boolean" && ()` ...
U mad
Wwll your first mistake is using JS. Should use TS. It'll at least force it to be a bool type .
2:10 "We all know 0 actually is the same as false" Wow...
It is not the same, what you have probably wanted to say is that is is **falsy**.
Topic 4 should have been to stop using javascript and to use typescript instead!
You can use !!showWinning and stay out of using not quite beautiful ? : null
dubouncing starts at 4:45 not 3:37
wtf?
!!
How about
!!showWinning &&
Will not show 0
Just split the conditional render from the first part into it's own function pointing at sub components/functions.
This video seems entirely driven by mistakes you've made and your hacks to solve them rather than best practices.
That's why we have TypeScript.