That's why some of us strictly use TypeScript.

@abhijithgowdar

Жыл бұрын

Yep

@johndoe-eu4ol

Жыл бұрын

Doesn’t TS only check at compile time? If you fetch data from an API, TS cant know the data was a wrong type

@abhijithgowdar

Жыл бұрын

@@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.

@andrewmanzanero6151

Жыл бұрын

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?

@dinoscheidt

Жыл бұрын

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.

@JakubSK

2 ай бұрын

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.

@mateusqueiros3871

2 ай бұрын

He could’ve used the Boolean(showWinning) function object instead, much cleaner and easier to understand.

@LewisMoten

Ай бұрын

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.

@daliovic24

Жыл бұрын

I was a bit annoyed him calling it a MISTAKE, it's kinda clickbaity tbh

@pavelisel4127

Жыл бұрын

@@daliovic24 I was gonna say the same thing and you two save e the time. thanks

@StephenRayner

Жыл бұрын

😂 agreed

@user-so2iw2mr5g

Жыл бұрын

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

@jeromesnail

Жыл бұрын

@@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. 😛

@somebody-17546

Жыл бұрын

Right . I agree

@RaZziaN1

Жыл бұрын

That's true, with ternary u can't use wrappers.

@internetexplorer7880

Жыл бұрын

@@RaZziaN1 elaborate please

@benkatz8999

Жыл бұрын

Also with typescript (which you should be using) it's a lot easier to ensure that your booleans are actually booleans.

@scottserage9022

Жыл бұрын

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.

@Voldrog

Жыл бұрын

I haven't seen an abort controller in a long time. Think people just don't know that something like that is a thing.

@silversurfer1707

Жыл бұрын

@@Voldrog yeah, I wonder why this isn't a more widespread knowledge.

@alexandrvienik1575

Жыл бұрын

Abort signal is a good decision but it doesn't reduce amount of api requests

@deadlock107

Жыл бұрын

2. It sends the same amount of requests, basically after every single keystroke. Doesn't solve the problem.

@vaggelisshmos6695

Жыл бұрын

Exactly. And for the first one I will add also to use triple equality. eg: showWinning === true

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.

@spicynoodle7419

Жыл бұрын

this

@ElektrykFlaaj

Жыл бұрын

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

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.

@JoseWaldier

5 ай бұрын

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.

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.

The && for conditional rendering is in most cases the better solution, because a ternary operator returning null is unnecessary code

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

@user-so2iw2mr5g

Жыл бұрын

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)

@scottserage9022

Жыл бұрын

@@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

@user-so2iw2mr5g

Жыл бұрын

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

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.

03:37 Debouncing 09:56 Forward Refs

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

One quick question: What is the vsc theme?

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!!

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

Debounce good thinking this could really smooth things for my app project. PS: Really like the duality when sharing good code to better coding.

Hey can you tell me which file icon you were using?

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

@HalfReaper

Жыл бұрын

please share the official documentation on that hook, or you mean a custom hook....

@und0

Жыл бұрын

No they didn't, wtf?! I think you mean useDeferredValue which is similar but the same

@evgeny6692

Жыл бұрын

@@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

It seems that use useRef for debounceValue instead of useState in useDebounce is much better, because it reduces the times of re-render

Typescript identifies the boolean problem and makes surprises much less likely.

Second problem - why not write usual debounce function except this hook??

That's why everyone uses typescript. Boolean && is just fine, keep using it

7:14 , can we use onBlur instead of onChage , hence when focus is lost from input, the fetching happen , rather than each key press

@pupfriend

Жыл бұрын

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.

@ElektrykFlaaj

Жыл бұрын

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.

Related to first mistake Is better to convert inputvalue to boolean by !! or is it still not good solution?

@und0

Жыл бұрын

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

@igorg1343

Жыл бұрын

@@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

Great video! Which theme do you use in VSC?

@gustavomelo6560

Жыл бұрын

I would like to know either

@CoderOne

Жыл бұрын

Halcyon ^_^

@patoalbornozz

Жыл бұрын

@@CoderOne Thanks! Keep going with this type of content

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)} /> );

@victormog

Жыл бұрын

Experimental

@grenadier4702

Жыл бұрын

@@victormog No, it's not. It's stable since React 18.

@victormog

Жыл бұрын

@@grenadier4702 Ok!

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.

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.

what is vscode theme?

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.

@fatmilf1498

5 ай бұрын

Blogger 😂

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.

Another piece of information Thank you so much.

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

what is your vscode theme?

why can't we prepare a value first and the apply a conditional rendering (for example with !! or Boolean())

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.

May i know the theme name?

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.

@Zagoorland

Жыл бұрын

or use !! for converting to boolean

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

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).

Great explanation. Thank u

Thanks for the forward ref explanation

3:50 put the bottom return as the false expression for the first ternary

4:16 sorry sir, I can't agree this approach is more readable. Less prone to errors - sure, but more readable - not at all.

Thank you so much!

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.

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 are we all using && and not ?? (null coalescing)?

@jordynad

Жыл бұрын

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.

does React Query handle the debouncing for you?

hey man, I finally understand how forwardRef works!

TS solves the issue of the conditional variable being a non boolean type. Use TS. It's 2022, everyone should be using TS.

Thanks 🙏👍

Why not use double ! to cast as a boolean? It's cleaner than a ternary.

Need more of this!

Thank you... for qaulity content... debounce trick seems to be smooth.

clear and valuable, appreciated.

Thanks 😊

First problem - just use TS!

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?

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 &&

react developers changed react routing milion times but no way they will add and tags....

@ElektrykFlaaj

Жыл бұрын

or at least a keyword prop "if"

@user-so2iw2mr5g

Жыл бұрын

Cause their not neccessery? Also wont really fit with how react works... , i mean switch case could mabey work and be usefull, but if else is pointless We dont render a template like in say angular or view, instead jsx just compiles into a lot of calls to React.createComponent, in which case something like an if tag is not needed, and having an else tag come after it wouldnt really work as components cant affect their siblings

@DJenriqez

Жыл бұрын

a lot of things is not neccessery but its nice to have,... like ? : and && looks inside react component just terrible

@user-so2iw2mr5g

Жыл бұрын

@@DJenriqez i mean sure but then again if my understanding of how react works is correct then implementing an if else tag is gonna be a fucking nightmare (also the last thing react needs is more unneeded layers to its component tree) Though i guess you could set it so that the if else tag compiles differently then all other tags to make it work, mind you just an if tag will be extremly easy, same for a singular tag that handles both the if and the else clauses, its a seperate if and else tags that work as siblings that are the problem

@DJenriqez

Жыл бұрын

I totaly don't understand what you are talking about what complexity, when preprocessor see tags, he will just replace them for ? : simillar for switch, where is problem? whole react thing is fcking preprocessor which translate to document.createElement("div") , I dont see problem to implement: "when you see translate it to ? : "

double negation (wich always results in an actual boolean) is way quicker and safer than a ternary : !!showWinning && ...

Vs code theme?

why not just use the useeffect and grab the data once on mount

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)

Why not (showWinning === true) && ?

&& with array is 0 when length is 0

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.

Amazing tips! Subscribed!

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.

You just use '!!' To force null force coalescence.!!! For false.

Great tutorial, thank you!

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.

I'll keep this video on my heart... Thank you a Lot !!!

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).

That's why we have TypeScript.

for conditional rendering you could also just use `showWinning=== true && ()` or with a javascript typecheck `typeof showWinning === "boolean" && ()` ...

@Nick0n

Жыл бұрын

U mad

That is why we should use TypeScript

interesting, 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

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

Interesting content

wao, you vs**e looks like my neovim code editor, cool

Typescript saves !

dubouncing starts at 4:45 not 3:37 wtf?

Topic 4 should have been to stop using javascript and to use typescript instead!

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

You can use !!showWinning and stay out of using not quite beautiful ? : null

abort api calls for me at least seems better than debounce.

False is not the same as falsy. This is a language basics.

How about !!showWinning && Will not show 0

Wwll your first mistake is using JS. Should use TS. It'll at least force it to be a bool type .

Debouncing 8:05

&& easily solves by using TS :D

7 minutes changing true to null and && to ? - wow