React performance

Нещодавно я готувався до інтерв‘ю по React Native. А ті, хто знайомі з ним, знають, що досить часто там може поставати питання продуктивності. Коли я читав одну статтю, першим реченням там було - "Все що впливає на продуктивність в React - впливає на неї і в React Native". Пропоную сьогодні зупинитися на React та виділити кілька тез, пов‘язаних з таким питанням.

Тези тут, освоєння за вами:

- Не створюйте функцій, об‘єктів у самому рендері компоненти. Винесіть це вище в константу.
- Навчіться користуватись хуками use(Memo|Callback|Ref), React.memo та PureComponent.
- Більшість HOC (функцій-обгорток, наприклад, connect від react-redux) зараз можна замінити хуками.
- Не забувайте, що setState (з хука useState) може встановлювати значення на основі попереднього, за допомогою переданої функції. Це часто допоможе позбутись, як мінімум, однієї залежності.

З кожним оновленням React стає все продуктивнішим. Але, здається, що і програмісти дедалі частіше знаходять способи написати поганий код.

Також хочу додати, що переоптимізовувати все теж недобре. Знайдіть золоту середину. Не треба оптимізовувати те, що і так добре працює. Витрачений час і можливе ускладнення коду не вартують цього.

#interview

#todo завантажити додаток Medium на телефон та зареєструватись

Останнім часом багатенько працюю з новими для себе фічами, тому постійно шукаю бібліотеки. А щоб не підключати перше, що попадеться, використовую даний сервіс - https://openbase.com

Тут можна вибрати фреймворк, посортувати бібліотеки, як вам зручно, подивитись відгуки (але їх не багато) і вибрати дійсно те, що вам підходить.

Користуйтесь!

#tips

Hello World

За останній час до нас доєдналось багатенько нових людей (чому ми надзвичайно раді), тому ми вирішили нагадати, хто ми є і навіщо ми тут всі зібрались.

Нас звати Юра та Настя. Настя frontend розробник (основний стек React, Angular), Юра - full stack (той самий React, Angular, а ще Svelte, Node, Flutter, React Native і трішки захоплюється Python). Та, Юру життя більше потріпало 🙃

Ми багато працюємо, постійно шукаємо щось нове і вдосконалюємо свої скіли (ну принаймні намагаємось). І тому в один прекрасний день ми вирішили ділитись усім, з чим ми стикаємось в щоденній роботі. А це нові технології, бібліотеки, статті і звичайно ж проблеми та їх вирішення.

Тому, як ви уже зрозуміли, основною темою каналу є веб розробка. Але крім цього, ми ділимось нашим досвідом, ідеями, порадами та щоденними справами, з якими стикаються програмісти.

Раді вас бачити. З нами цікаво! 💛

Навігація

#article - ділимось цікавими статтями
#experience - розповідаємо все з нашого досвіду
#tips - даємо поради, яких не просили
#todo - пушимо робити щось корисне
#interview - розбираємо питання на інтерв'ю будь-якої складності (кожного вівторка)
#quiz - вирішуємо tricky завдання (кожної середи)
#library - рекомендуємо бібліотеки, які неодноразово нас рятували
#news - пишемо про події в сфері ІТ, які не залишать вас байдужими
#english_friday - обговорюємо цікаві теми англійською (кожну п'ятницю)
#how_to - ділимось класно реалізованими кейсами
#localhost - щось на особистому

Undefined vs null

Не розумію, чому так полюбляють це питання на співбесідах, але поїхали:

1. Визначення
- Undefined означає те, що змінній не присвоїли значення, або вона його втратила.
- Null використовується тоді, коли змінній потрібно дати пусте значення.

2. Тип
- В JS undefined має свій власний тип - undefined, тому typeof undefined = ‘undefined’.
- Якщо ви напишете typeof null, то JS вам видасть тип object. Якщо запитаєте чому? Тому що це помилка в мові і її не так просто виправити. Банально через те, що нові версії мають бути сумісні з попередніми. Так і живем.

3. JSON
- В JSON немає undefined.
- А ось тип null є.

4. Арифметичні операції
- undefined + 1 // NaN
- null + 1 // 1

Ну і на останок:
null == undefined // true
null === undefined // false

Це основні відмінності. Зберігайте! 💛

#interview

Hooks

Якщо ви працюєте на React, швидше за все, ви вже використовуєте hooks. Погодьтесь, що часто доводиться писати хуки, які є досить загальними і здається, що хтось вже точно таке писав.

Тому маємо для вас крутий сайт, де ви зможете знайти багато готових хуків:
JS - https://usehooks.com
TS - https://usehooks-ts.com

#tips

SVG vs Canvas

Правильніше б звучало порівняння векторної і растрової графіки, але на ітерв’ю ви все-таки частіше почуєте таке формулювання питання

SVG - (Scalable Vector Graphics) - векторна графіка, що масштабується - є мовою розмітки, розширеною з XML для опису двомірної векторної графіки.

Для створення зображення у векторній графіці використовуються геометричні примітиви (крапки, лінії, криві, багатокутники). З їх допомогою можна створювати масштабовані зображення, які не втрачають якість при масштабуванні.

Сanvas - це HTML елемент, який використовується для створення растрової графіки за допомогою JavaScript. Елемент <canvas> надає зручний API для малювання графіки за допомогою JavaScript.

Це технологія миттєвого малювання, вона не зберігає своїх елементів у дереві DOM, отже, немає жодного способу змінити існуючий малюнок або реагувати на події. Це означає, що, коли буде потрібно новий кадр, необхідно буде відобразити всю сцену заново.

Ну і коротке порівняння:

1. SVG - побудований на основі вектора (складається з фігур), canvas - на основі растра (складається з пікселів)

2. SVG має кращу масштабованість, ніж Canvas.

3. SVG забезпечує кращу продуктивність з меншою кількістю об’єктів або більшою поверхнею, а Canvas навпаки - забезпечує кращу продуктивність з меншою поверхнею або більшою кількістю об’єктів.

4. SVG можна змінювати за допомогою скріпта та CSS, а Canvas можна змінювати лише за допомогою скріпта.

5. Елементи SVG стають частиною дерева DOM сторінки. Canvas за поведінкою схожий на один елемент <img>. Canvas можна зберегти у форматі PNG або JPG.

#interview

Що таке Pure Function?

Питання, яке дуже полюбляють на співбесідах :)

Pure Function - це функція, яка видає одинаковий результат, коли ви передаєте їй ті самі аргументи.

Думаю, буде швидше пояснити на короткому прикладі:

const add = (x, y) => x + y;
add(2, 4); // 6

В даному прикладі функція повертає значення на основі заданих параметрів. Якщо ви передали 2 і 4, ви завжди отримаєте 6. Ніщо інше не впливає на вихід.

Розглянемо інший приклад:

let x = 2;
const add = (y) => x += y;
add(4); // x === 6 (the first time)

А в цьому прикладі ви отримуєте різні результати залежно від того, коли ви викликали функцію. Перший раз дає 6, наступного разу 10 і так далі. Тому дану функцію ми вже не можемо назвати pure function.

Pure Function не повинна мати жодних побічних ефектів (side effects).

Side effects - це будь-що, що може повпливати на “чистоту” вашої функції.

Ось коротенький гайд, як уникнути side effects:

1. Залиште ваші аргументи в спокої :)
Якщо вам потрібно працювати з аргументами, зробіть копії і маніпулюйте вже ними.

2. Не робіть ніяких HTTP викликів, нічого не записуйте у файлову систему, не логуйте і тд.
Інкапсулюйте дану логіку в їх власних модулях.

3. Будьте прозорими.
Робіть ваші функції такими, щоб їх можна було легко замінити їхніми результатами і це не поламало б вашу програму.

Наведемо вам ще кілька прикладів side effects:
- мутація вхідних даних;
- console.log;
- ajax/fetch;
- зміна DOM.

Ну і виникає логічне питання - а навіщо нам чисті функції?

Дотримання даної концепції зробить ваш код кращим для керування та підтримки. Це означає менше помилок, швидке виявлення проблем, більшу можливість повторного використання та можливість якіснішого тестування.

Ну і стаття, де можна подивитись більше прикладів по даній темі - читати статтю

#interview