Diyorbek.dev | πŸ‘¨πŸ»β€πŸ’»
381 subscribers
299 photos
35 videos
9 files
119 links
Allohga taqvo qiling. Va Alloh sizga ilm beradi. [2:282]


Software engineer @ OctaneJS Core Team

Dasturchi, jiddiy, kamgap, oddiy inson


Γ’zim haqimda kΓ²proq ma'lumot uchun: @Diyorbek_juraev_blog

Web sahifam: https://mrdiyorbek.uz/
Download Telegram
#Common_Beginner_Mistakes_with_React

Question number: 1

Who can find the bug here? πŸ˜‰

@Diyorbekk_dev
Diyorbek.dev | πŸ‘¨πŸ»β€πŸ’»
#Common_Beginner_Mistakes_with_React Question number: 1 Who can find the bug here? πŸ˜‰ @Diyorbekk_dev
#answer

Question number: 1 [answer]

Our goal is to conditionally show a shopping list. If we have at least 1 item in the array, we should render a ShoppingList element. Otherwise, we shouldn't render anything.

And yet, we wind up with a random 0 in the UI!

This happens because items.length evaluates to 0. And since 0 is a falsy value in JavaScript, the && operator short-circuits, and the entire expression resolves to 0.

&& - false ni izlab yuradi.

@Diyorbekk_dev
πŸ‘1πŸ”₯1
#Common_Beginner_Mistakes_with_React

Question number: 2

Who can find the bug here? πŸ˜‰

@Diyorbekk_dev
❀‍πŸ”₯1πŸ‘1
Forwarded from Miyashunos
What do you think?

@Diyorbekk_dev
Diyorbek.dev | πŸ‘¨πŸ»β€πŸ’»
#Common_Beginner_Mistakes_with_React Question number: 2 Who can find the bug here? πŸ˜‰ @Diyorbekk_dev
Answer

React
relies on an state variable's identity to tell when the state has changed. When we push an item into an array, we aren't changing that array's identity, and so React can't tell that the value has changed.

How to fix it: We need to create a brand new array. Here's solution

function handleAddItem(value) {
const nextItems = [...items, value];
setItems(nextItems);
}


@Diyorbekk_dev
Bilamizki array ichidagi elementlarni render qilganimizda bir xil bo'lmagan (unique ) key kerak bo'ladi. (so that React can identify each item).

Nima deb oylaysiz, agar biz key sifatida "uuid" bersak yaxshi yechim bo'laoladimi?
Anonymous Poll
59%
Ha, bo'la oladi
29%
Yoq, bo'la olmaydi.
12%
Bilmadim
πŸ”₯2
Diyorbek.dev | πŸ‘¨πŸ»β€πŸ’»
Bilamizki array ichidagi elementlarni render qilganimizda bir xil bo'lmagan (unique ) key kerak bo'ladi. (so that React can identify each item).

Nima deb oylaysiz, agar biz key sifatida "uuid" bersak yaxshi yechim bo'laoladimi?
Generating it in the JSX like this will cause the key to change on every render. Whenever the key changes, React will destroy and re-create these elements, which can have a big negative impact on performance.

This pattern β€” generating the key when the data is first created β€” can be applied to a wide range of situations.

Demak , in conclusion, It is not the best solution.πŸ˜‰

@Diyorbekk_dev
ASCII TABLE

@Diyorbekk_dev
πŸ”₯1
Front-end yo'nalishi bo'yicha interview tashkillashtirish niyatim bor kim qatnasholadi?
(JavaScript & React)

Interviewer: Diyorbek
Candidate: You 🫡

@Diyorbekk_dev
#JavaScript

How do you decode or encode a URL in JavaScript?


 encodeURI() 
function is used to encode an URL. This function requires a URL string as a parameter and return that encoded string.
 decodeURI() 
function is used to decode an URL. This function requires an encoded URL string as parameter and return that decoded string.

Note: If you want to encode characters such as / ? : @ & = + $ # then you need to use
 encodeURIComponent(). 


@Diyorbekk_dev
#JavaScript

What is memoization ?

Memoization
is a technique used in computer programming to optimize the performance of a function by caching its results based on its input parameters.

The goal is to avoid redundant computations for the same set of inputs.

on the picture, a simple example of adding function with memoization in JavaScript .

@Diyorbekk_dev
πŸ†’2
Arrayda 7 element bor, hajmi - 10. Har bir element 2 baytni tashkil qilsa, array hotirada qancha joy oladi?
Anonymous Quiz
21%
14 bayt
39%
20 bayt
32%
to'g'ri javob keltirilmagan
7%
70 bayt
πŸ”₯2
JavaScript-da Array-ning length istalgancha bo'lshi mumkinmi?
Anonymous Quiz
50%
Ha mumkin
50%
Yo'q checklangan