Разница между Context API и Redux
Context API и Redux решают схожие задачи, но применяются в разных ситуациях. Обе технологии используются для управления состоянием в React-приложениях, но подход к их применению и масштаб использования различен.
📌 Context API хорош для передачи статичных данных или тех, что редко изменяются. Однако он не рассчитан на сложное управление состоянием, особенно если его много, и если нужно отслеживать изменения.
📌 Redux нужен там, где важно чётко отслеживать все изменения состояния, легко тестировать и логировать эти изменения, а также предсказуемо управлять ими. Он даёт больше возможностей и контроля, но требует больше кода и сложнее в настройке по сравнению с Context API.
#redux #frontend #react #context
Context API и Redux решают схожие задачи, но применяются в разных ситуациях. Обе технологии используются для управления состоянием в React-приложениях, но подход к их применению и масштаб использования различен.
Context API в React удобен, когда нужно передать данные на несколько уровней глубже по иерархии компонентов, минуя промежуточные. Например, у вас есть тема оформления (светлая/тёмная), которая должна быть доступна на любом уровне приложения. Использовать props для передачи таких данных на каждом уровне неэффективно и приводит к "props drilling". Context API позволяет создать глобальный контекст для темы, к которому любой компонент может обратиться напрямую, не завися от промежуточных компонентов.
Redux стоит использовать, когда приложение сложное и нужно централизованное управление состоянием. Представьте крупное приложение с корзиной покупок, аутентификацией, и несколькими взаимодействующими страницами. Каждая часть приложения может нуждаться в доступе к общим данным и реагировать на их изменения. В Redux есть одно глобальное хранилище, где хранится все состояние приложения. Компоненты могут получать данные из этого хранилища и отправлять туда изменения через экшены.
#redux #frontend #react #context
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
👍11🔥3💯2
Задача с собеседования
Интересная задача попалась на позицию Middle.
Какой ответ будет?
Интересная задача попалась на позицию Middle.
// Что выведет этот код?
function foo() {
const x = 10;
return {
x: 20,
bar: () => {
console.log(this.x)
},
baz: function() {
console.log(this.x)
}
};
}
const obj1 = foo();
obj1.bar(); // ...
obj1.baz(); // ...
const obj2 = foo.call({ x: 30 });
obj2.bar(); // ..
obj2.baz(); // ...
Какой ответ будет?
❤6👍6🔥3💯1
Отличие useMemo от useCallback
📌 useMemo():
- Кэширует результат выполнения функции между рендерами компонента.
- Возвращает закэшированное значение.
- Полезен для оптимизации вычислений и предотвращения ненужных перерасчётов.
📌 useCallback():
- Кэширует саму функцию между рендерами компонента.
- Возвращает мемоизированную версию функции.
- Полезен для предотвращения лишних ререндеров компонентов, когда функция используется в зависимостях других хуков.
Вкратце, useMemo кэширует вычисленное значение, а useCallback — кэширует функцию.
#react #memo #useMemo #useCallback
- Кэширует результат выполнения функции между рендерами компонента.
- Возвращает закэшированное значение.
- Полезен для оптимизации вычислений и предотвращения ненужных перерасчётов.
- Кэширует саму функцию между рендерами компонента.
- Возвращает мемоизированную версию функции.
- Полезен для предотвращения лишних ререндеров компонентов, когда функция используется в зависимостях других хуков.
Вкратце, useMemo кэширует вычисленное значение, а useCallback — кэширует функцию.
#react #memo #useMemo #useCallback
Please open Telegram to view this post
VIEW IN TELEGRAM
👍18💯6❤3🔥1🤝1
Типы и структуры данных
Типы данных и структуры данных часто путают, но это две разные концепции, которые играют важную роль в программировании.
📌 Типы данных — это категории, в которые классифицируются данные. Они определяют, какие операции можно выполнять с этими данными и как они хранятся в памяти. В JavaScript есть примитивные и ссылочные типы данных:
📌 Структуры данных — это способы организации и хранения данных в памяти таким образом, чтобы к ним было удобно обращаться и эффективно работать. В JavaScript структуры данных включают:
❓ В чем разница?
Типы данных — это отдельные значения (например, число или строка), тогда как структуры данных — это контейнеры, организующие и хранящие эти значения для более сложных операций (например, массив или объект).
Тип данных определяет, что это за значение, а структура данных — как эти значения организованы.
#frontend #javanoscript
👍 Менторство | 🔝 Сообщество
Типы данных и структуры данных часто путают, но это две разные концепции, которые играют важную роль в программировании.
Примитивные типы данных: Number, String, Boolean, Null, Undefined, Symbol, BigInt.
Ссылочные типы данных: Object (включая массивы, функции и даты).
Массивы (Array): Упорядоченные списки элементов, доступ к которым осуществляется по индексу.
Объекты (Object): Коллекции пар "ключ-значение", где ключи — это строки (или символы), а значения могут быть любыми типами данных.
Наборы (Set): Коллекции уникальных значений, где каждое значение может появляться только один раз.
Карты (Map): Коллекции пар "ключ-значение", где ключи могут быть любого типа, не только строками.
Типы данных — это отдельные значения (например, число или строка), тогда как структуры данных — это контейнеры, организующие и хранящие эти значения для более сложных операций (например, массив или объект).
Тип данных определяет, что это за значение, а структура данных — как эти значения организованы.
#frontend #javanoscript
Please open Telegram to view this post
VIEW IN TELEGRAM
👍15🔥3💯1
Менторство — самый эффективный способ обучения. В отличие от многих менторов, которые ограничиваются перепиской и предоставлением материалов, я глубоко вовлечен в процесс. Мой подход — развитие сообщества и постоянное улучшение обучения.
В IT нет такой конкуренции, как это часто изображают. Один из моих учеников за неделю прошел 5 скринингов, 3 из них привели к приглашению на технические собеседования, сейчас ожидаем фидбек от двух компаний. Диапазон зарплат — от 150 до 250 тысяч рублей. Он практикуется в Ехабе уже 1.5 месяца и посещает каждый день созвоны.
Моя программа охватывает 90% вопросов, которые могут задать на собеседовании. Ученики уверенно рассказывают о своем опыте и процессах, как отче наш. Зачем начинать с позиции джуна за 40 тысяч, если можно претендовать на мидл-уровень с зарплатой 200 тысяч? Это не фантазии — это реальность, которую я наблюдаю ежедневно, когда ребята получают офферы на 150к+.
Мой подход позволяет новичкам без опыта быть сильнее специалистов с 1-3 годами стажа. Мы изучаем полный стек, архитектуру, рабочие кейсы, а также прокачиваемся в Ехабе, работая в команде из 30 человек с ежедневными дейликами, канбан доской, планированием и ретроспективой.
К концу года каждый из вас, кто имеет базу, может найти работу с зарплатой от 150 тысяч. А новички смогут освоить стек, чтобы после Нового года приступить к поиску работы. Просто представьте, что вы работаете в сфере, которая вам нравится и получаете 150к. Это может стать правдой, если взять все в свои руки.
До конца августа сделаю скидку 10% на обучение. Это отличный шанс для тех, кто сомневался.
Сайт с ценами:
https://reactify.ru
Канал с полным обзором обучения:
@mentor_reactify
На канале также есть гайд — заходите и забирайте себе!
#mentor #react #frontend
В IT нет такой конкуренции, как это часто изображают. Один из моих учеников за неделю прошел 5 скринингов, 3 из них привели к приглашению на технические собеседования, сейчас ожидаем фидбек от двух компаний. Диапазон зарплат — от 150 до 250 тысяч рублей. Он практикуется в Ехабе уже 1.5 месяца и посещает каждый день созвоны.
Моя программа охватывает 90% вопросов, которые могут задать на собеседовании. Ученики уверенно рассказывают о своем опыте и процессах, как отче наш. Зачем начинать с позиции джуна за 40 тысяч, если можно претендовать на мидл-уровень с зарплатой 200 тысяч? Это не фантазии — это реальность, которую я наблюдаю ежедневно, когда ребята получают офферы на 150к+.
Мой подход позволяет новичкам без опыта быть сильнее специалистов с 1-3 годами стажа. Мы изучаем полный стек, архитектуру, рабочие кейсы, а также прокачиваемся в Ехабе, работая в команде из 30 человек с ежедневными дейликами, канбан доской, планированием и ретроспективой.
К концу года каждый из вас, кто имеет базу, может найти работу с зарплатой от 150 тысяч. А новички смогут освоить стек, чтобы после Нового года приступить к поиску работы. Просто представьте, что вы работаете в сфере, которая вам нравится и получаете 150к. Это может стать правдой, если взять все в свои руки.
До конца августа сделаю скидку 10% на обучение. Это отличный шанс для тех, кто сомневался.
Сайт с ценами:
https://reactify.ru
Канал с полным обзором обучения:
@mentor_reactify
На канале также есть гайд — заходите и забирайте себе!
#mentor #react #frontend
❤8👍4🔥1
Новая ссылка, прошу прощения, намудрил с каналом. Записи были скрыты от всех
Вот тут подробно про обучение, двух минутные отрывки из каждой активности. Так же гайд
@mentor_reactify
Вот тут подробно про обучение, двух минутные отрывки из каждой активности. Так же гайд
@mentor_reactify
🔥4👍2🤝1
На каком вы этапе?
Anonymous Poll
11%
Изучаю верстку
16%
Изучаю JavaScript
18%
Изучаю React
16%
Практикую React + экоситстема
19%
Ищу работу
21%
Уже работаю
👍5❤3🔥2
На какую позицию ищите работу?
Anonymous Poll
40%
Я новичок, ищу на Джуна
17%
Я новичок, ищу на Мидла
12%
Я ищу стажировку
20%
Я уже работаю
10%
Результат
❤2👍2🔥2
Планирую провести стрим с ответами на вопросы. Будет интересно обсудить трудоустройство, работу, обучение, React, собеседования и многое другое. Присоединились бы?
Anonymous Poll
65%
да, посмотреть
6%
нет
5%
да, задать вопрос
24%
нет, но запись глянул бы
👍6💯1
😥 Павел Дуров задержан
Основателя Telegram «приняли» прямо на выходе из его частного джета в парижском аэропорту Ле Бурже.
#FreePavel
Основателя Telegram «приняли» прямо на выходе из его частного джета в парижском аэропорту Ле Бурже.
#FreePavel
😢29👍1
Сравнение объектов и Map в JavaScript
📌 Тип ключей:
Объект: Ключи приводятся к строкам. Любой нестроковый ключ, например объект, будет преобразован в строку.
Map: Ключи могут быть любого типа, включая объекты, функции и числа.
📌 Порядок ключей:
Объект: Порядок ключей не гарантирован.
Map: Порядок ключей сохраняется в том порядке, в котором они были добавлены.
📌 Итерация:
Объект: Нужно использовать Object.keys(), Object.values(), или Object.entries() для итерации.
Map: Поддерживает методы для итерации по умолчанию, включая map.keys(), map.values(), и map.entries().
📌 Дополнительные методы:
Объект: Ограниченные возможности, требует использования Object.keys(), Object.values(), и других вспомогательных функций для работы с данными. Для очистки свойств нужно явно удалять каждое свойство.
Map: Обладает множеством удобных методов:
set(key, value): Добавляет элемент.
get(key): Получает значение по ключу.
has(key): Проверяет наличие ключа.
delete(key): Удаляет элемент.
clear(): Удаляет все элементы.
#frontend #javanoscript #map #object
Объект: Ключи приводятся к строкам. Любой нестроковый ключ, например объект, будет преобразован в строку.
Map: Ключи могут быть любого типа, включая объекты, функции и числа.
const obj = {};
const map = new Map();
const keyObj = {};
obj[keyObj] = 'value'; // Ключ преобразуется в "[object Object]"
map.set(keyObj, 'value'); // Ключ остается объектом
console.log(obj[keyObj]); // 'value'
console.log(map.get(keyObj)); // 'value'
Объект: Порядок ключей не гарантирован.
Map: Порядок ключей сохраняется в том порядке, в котором они были добавлены.
const obj = { b: 2, a: 1 };
const map = new Map([['b', 2], ['a', 1]]);
console.log(Object.keys(obj)); // ['b', 'a'] (порядок не гарантирован)
console.log([...map.keys()]); // ['b', 'a'] (порядок гарантирован)
Объект: Нужно использовать Object.keys(), Object.values(), или Object.entries() для итерации.
Map: Поддерживает методы для итерации по умолчанию, включая map.keys(), map.values(), и map.entries().
const obj = { a: 1, b: 2 };
const map = new Map([['a', 1], ['b', 2]]);
for (const key in obj) {
console.log(key, obj[key]);
}
for (const [key, value] of map) {
console.log(key, value);
}
Объект: Ограниченные возможности, требует использования Object.keys(), Object.values(), и других вспомогательных функций для работы с данными. Для очистки свойств нужно явно удалять каждое свойство.
Map: Обладает множеством удобных методов:
set(key, value): Добавляет элемент.
get(key): Получает значение по ключу.
has(key): Проверяет наличие ключа.
delete(key): Удаляет элемент.
clear(): Удаляет все элементы.
#frontend #javanoscript #map #object
Please open Telegram to view this post
VIEW IN TELEGRAM
1👍16💯2🔥1
Классические алгоритмы на собеседованиях
Многие считают, что для успешного трудоустройства в IT необходимо знать сложные алгоритмы и структуры данных. Однако на практике часто оказывается, что собеседования включают в себя задачи, которые гораздо проще, чем вы могли бы ожидать.
Вот что обычно спрашивают на собеседованиях:
✔️ Палиндромы: Проверка, является ли строка палиндромом, — это классическая задача, которая помогает понять, как вы работаете с строками и массивами. Например, задача на LeetCode: определить, является ли данная строка палиндромом.
✔️ Уникальные значения: Проверка, содержит ли массив только уникальные значения, — это ещё одна распространённая задача. Она показывает, как вы можете эффективно использовать структуры данных для решения проблем.
✔️ Замена подстроки: Задача на замену одной подстроки в строке на другую. Это может включать простую замену или более сложные случаи, требующие умения работать со строками и регулярными выражениями.
✔️ Задачи по React и TypeScript: Часто собеседования могут включать задачи, связанные с React и TypeScript. Это могут быть простые задачи на компоненты, управление состоянием или типизацию.
Не забывайте, что ключ к успешному собеседованию — это не только знания алгоритмов, но и способность продемонстрировать ваши практические навыки и умение решать реальные проблемы. Удачи!
#frontend #work
Многие считают, что для успешного трудоустройства в IT необходимо знать сложные алгоритмы и структуры данных. Однако на практике часто оказывается, что собеседования включают в себя задачи, которые гораздо проще, чем вы могли бы ожидать.
Вот что обычно спрашивают на собеседованиях:
Не забывайте, что ключ к успешному собеседованию — это не только знания алгоритмов, но и способность продемонстрировать ваши практические навыки и умение решать реальные проблемы. Удачи!
#frontend #work
Please open Telegram to view this post
VIEW IN TELEGRAM
👍21🔥4❤1
Какой будет порядок логов? И Что будет в этих логах?
#frontend #react
import React, { useEffect, useState } from 'react'
import ReactDOM from 'react-dom'
function App() {
const [state, setState] = useState(0)
console.log(state)
useEffect(() => {
setState(state => state + 1)
}, [])
useEffect(() => {
console.log(state)
setTimeout(() => {
console.log(state)
}, 100)
}, [])
return null
}
ReactDOM.render(<App/>, document.getElementById('root'))
#frontend #react
👍10❤3🔥3💯1🫡1
Неделю назад ученик проходил собеседование в Яндекс. Сам процесс найма состоит из 5 этапов. Один из этапов это алгоритмическое интервью. Вот какие задачи он решал. Фидбек от интервьюера был положительный, ученик прошел в следующий этап.
Задача №1:
Сложность: Easy
Написать функцию sleep, которая принимает продолжительность в миллисекундах и возвращает Promise, который разрешается после указанной задержки.
function sleep(duration) {
// ваш код здесь
}
Задача №2:
Сложность: Easy
Написать функцию myJoin, которая имитирует работу метода Array.prototype.join. Функция принимает разделитель и любое количество аргументов, а затем соединяет их в строку.
const myJoin = (separator, ...args) => {
// ваш код здесь
}
myJoin('.', 'a', 'b', 'c'); // 'a.b.c'
myJoin('-', 'a', 'b', 'c', 'd'); // 'a-b-c-d'
Задача №3:
Сложность: Medium
Написать имплементацию Promise.any. Функция должна принимать массив промисов и возвращать новый промис, который разрешается, если хотя бы один из переданных промисов разрешен. В случае, если все промисы отклонены, должен быть вызван reject с ошибкой AggregateError.
function any(promises) {
// ваш код здесь
}
Задача №4:
Сложность: Hard
Написать функцию-декоратор, которая ограничивает число вызовов исходной функции. Декоратор принимает три аргумента:
- Исходную функцию
- Лимит вызовов
- Callback, который должен быть вызван при достижении лимита.
У возвращаемой функции должен быть метод reset, который сбрасывает счетчик вызовов.
function limitedCalls(fn, limit, callback) {
// ваш код здесь
}
// Примеры использования:
function log(name) {
return `Hello, ${name}!`;
}
function limitReached(name) {
return `Sorry, ${name}, the function can no longer be called.`;
}
const limitedLog1 = limitedCalls(log, 2, limitReached);
limitedLog1('Alice'); // "Hello, Alice!"
limitedLog1('Alice'); // "Sorry, Alice, the function can no longer be called."
limitedLog1.reset();
#frontend #algo
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥18❤4👍4
Последние деньки лета — давайте немного отдохнём и зарядимся на следующий год. Чтобы следующее лето было кайфовым: работали разработчиками на удалёнке, получали хорошие деньги и чилили у бассейна.
Если нужна помощь, обращайтесь ко мне😎 Я уже стал профи в этом деле: столько собеседований пройдено, столько скринингов завершено. Написано множество гайдов и собрано море материалов для учеников.
Многие ученики приходили и говорили: «Да хотя бы 100 тысяч зарплату, чтобы не выделяться». А спустя время уже отказываются от предложений в 150 тысяч, им подавай 200+! Очень круто наблюдать, как люди растут как специалисты. Сколько сил вложено в любимое дело, сколько созвонов пройдено. Каждый заслуживает лучшего👍
Не забудьте про 10% скидку на менторство до конца августа
Сайт с ценами:
https://reactify.ru
Канал с полным обзором обучения:
@mentor_reactify
На канале также есть гайд — заходите и забирайте себе!
Если нужна помощь, обращайтесь ко мне😎 Я уже стал профи в этом деле: столько собеседований пройдено, столько скринингов завершено. Написано множество гайдов и собрано море материалов для учеников.
Многие ученики приходили и говорили: «Да хотя бы 100 тысяч зарплату, чтобы не выделяться». А спустя время уже отказываются от предложений в 150 тысяч, им подавай 200+! Очень круто наблюдать, как люди растут как специалисты. Сколько сил вложено в любимое дело, сколько созвонов пройдено. Каждый заслуживает лучшего
Не забудьте про 10% скидку на менторство до конца августа
Сайт с ценами:
https://reactify.ru
Канал с полным обзором обучения:
@mentor_reactify
На канале также есть гайд — заходите и забирайте себе!
Please open Telegram to view this post
VIEW IN TELEGRAM
👍8❤3🔥1😁1
Стрим/Ответы на вопросы
Дата и время: 4 сентября, Среда, 19:00 мск
Место: YouTube
Поболтаем с вами, отвечу на вопросы, расскажу про рынок, про собеседования и тд.
📌 Сюда можете отправить вопрос: https://forms.gle/nS3c2cgaV43ssvLE8
Так же вопросы можно задавать на стриме.
Дата и время: 4 сентября, Среда, 19:00 мск
Место: YouTube
Поболтаем с вами, отвечу на вопросы, расскажу про рынок, про собеседования и тд.
Так же вопросы можно задавать на стриме.
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥3👍1🤝1
Руслан Куянец | Reactify pinned «Стрим/Ответы на вопросы Дата и время: 4 сентября, Среда, 19:00 мск Место: YouTube Поболтаем с вами, отвечу на вопросы, расскажу про рынок, про собеседования и тд. 📌 Сюда можете отправить вопрос: https://forms.gle/nS3c2cgaV43ssvLE8 Так же вопросы можно…»
Кадровый голод, Горящие вакансии
Please open Telegram to view this post
VIEW IN TELEGRAM
😁12👍9🔥5🤝1
Render Props
Render Props в React — это паттерн для повторного использования логики между компонентами. Вместо того чтобы делать компоненты "умными" или использовать HOC (Higher-Order Components), компонент с Render Props использует функцию для рендеринга, передаваемую через проп.
Зачем нужно?
✔️ Повторное использование логики: Логику можно вынести в один компонент и использовать с разным UI.
✔️ Гибкость: Позволяет передавать любую JSX разметку, что делает компонент более универсальным.
#frontend #react
Render Props в React — это паттерн для повторного использования логики между компонентами. Вместо того чтобы делать компоненты "умными" или использовать HOC (Higher-Order Components), компонент с Render Props использует функцию для рендеринга, передаваемую через проп.
Зачем нужно?
#frontend #react
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥11👍7🤔1💯1