en
Feedback
React

React

Open in Telegram

Подборки по React js и все что с ним связано. По всем вопросам @evgenycarter

Show more
2 681
Subscribers
No data24 hours
-37 days
-1130 days
Posts Archive
\nwindow.__STATE__ = JSON.parse(window.myState.innerHTML)\n\n// \"Just parse\":\nwindow.__STATE__ = JSON.parse(\"{\\\"foo\\\":\\\"bar\\\"}\")\n\nhttps://calendar.perfplanet.com/2023/fastest-way-passing-state-javascript-revisited/\n\n#react\n\n✍️ @React_lib","datePublished":"2024-07-29T07:11:42Z","dateModified":"2024-07-29T07:11:42Z","author":{"@type":"Organization","name":"React","url":"https://telemetr.io/en/channels/1689019175-react_lib","image":"https://img.tlmtr.io/c/1QiX2L/5276438899222232427?ty=x"},"publisher":{"@type":"Organization","name":"React","url":"https://telemetr.io/en/channels/1689019175-react_lib","image":"https://img.tlmtr.io/c/1QiX2L/5276438899222232427?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":1093},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":4},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":12}]}},{"@type":"ListItem","position":9,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/en/channels/1689019175-react_lib/posts/570","url":"https://telemetr.io/en/channels/1689019175-react_lib/posts/570","mainEntityOfPage":"https://telemetr.io/en/channels/1689019175-react_lib/posts/570","headline":"⚛️ Совет React 💡 Используйте строковые литералы + тип union в typescript для указания точных строковых значен…","articleBody":"⚛️ Совет React 💡\n\nИспользуйте строковые литералы + тип union в typescript для указания точных строковых значений в props \n\n#react\n\n✍️ @React_lib","datePublished":"2024-07-25T05:34:01Z","dateModified":"2024-07-25T05:34:01Z","author":{"@type":"Organization","name":"React","url":"https://telemetr.io/en/channels/1689019175-react_lib","image":"https://img.tlmtr.io/c/1QiX2L/5276438899222232427?ty=x"},"publisher":{"@type":"Organization","name":"React","url":"https://telemetr.io/en/channels/1689019175-react_lib","image":"https://img.tlmtr.io/c/1QiX2L/5276438899222232427?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":1003},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":2},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":5}]}},{"@type":"ListItem","position":10,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/en/channels/1689019175-react_lib/posts/569","url":"https://telemetr.io/en/channels/1689019175-react_lib/posts/569","mainEntityOfPage":"https://telemetr.io/en/channels/1689019175-react_lib/posts/569","headline":"⚛️ Совет по React + Typescript Вы можете использовать `typeof` для типизации предполагаемых типов #react ✍️ @…","articleBody":"⚛️ Совет по React + Typescript\n\nВы можете использовать `typeof` для типизации предполагаемых типов \n\n#react\n\n✍️ @React_lib","datePublished":"2024-07-23T19:32:33Z","dateModified":"2024-07-23T19:32:33Z","author":{"@type":"Organization","name":"React","url":"https://telemetr.io/en/channels/1689019175-react_lib","image":"https://img.tlmtr.io/c/1QiX2L/5276438899222232427?ty=x"},"publisher":{"@type":"Organization","name":"React","url":"https://telemetr.io/en/channels/1689019175-react_lib","image":"https://img.tlmtr.io/c/1QiX2L/5276438899222232427?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":1023},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":7},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":15}]}},{"@type":"ListItem","position":11,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/en/channels/1689019175-react_lib/posts/568","url":"https://telemetr.io/en/channels/1689019175-react_lib/posts/568","mainEntityOfPage":"https://telemetr.io/en/channels/1689019175-react_lib/posts/568","headline":"🤘 Пройди хардкорный тест по JavaScript+Angular ✔️ Ответь на 20 вопросов и проверь свои знания. Сможешь сдать…","articleBody":"🤘 Пройди хардкорный тест по JavaScript+Angular \n\n✔️ Ответь на 20 вопросов и проверь свои знания. Сможешь сдать — пройдёшь на продвинутый курс \"Angular Developer\". \n\n⛔️ТЕСТ СМОГЛИ ПРОЙТИ ТОЛЬКО 40% УЧАСТНИКОВ\n\n⏰ Время прохождения теста ограничено 25 минут\n\n✍️ПРОЙТИ ТЕСТ: https://vk.cc/cyBjGu\n\n💣 Пройдете тест и получите:\n✔️ Живое общение с экспертами\n✔️ Лучшие открытые уроки прошлых наборов курса\n✔️ Продвинутые темы и практика на «боевых» задачах уровня Middle+\n✔️ Скидку на прохождение онлайн курса «Angular Developer»\n\nРеклама. ООО «Отус онлайн-образование», ОГРН 1177746618576, www.otus.ru","datePublished":"2024-07-23T11:54:01Z","dateModified":"2024-12-28T18:23:23Z","author":{"@type":"Organization","name":"React","url":"https://telemetr.io/en/channels/1689019175-react_lib","image":"https://img.tlmtr.io/c/1QiX2L/5276438899222232427?ty=x"},"publisher":{"@type":"Organization","name":"React","url":"https://telemetr.io/en/channels/1689019175-react_lib","image":"https://img.tlmtr.io/c/1QiX2L/5276438899222232427?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":852}]}},{"@type":"ListItem","position":12,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/en/channels/1689019175-react_lib/posts/567","url":"https://telemetr.io/en/channels/1689019175-react_lib/posts/567","mainEntityOfPage":"https://telemetr.io/en/channels/1689019175-react_lib/posts/567","headline":"Довольно круто, что архитектура React Fiber позволяет избежать переполнения стека Этот рекурсивный компонент…","articleBody":"Довольно круто, что архитектура React Fiber позволяет избежать переполнения стека\n\nЭтот рекурсивный компонент обычно переполняется\n«Maximum call stack size exceeded».\n\nПосле этого PR он больше не будет переполняться\n\n#react\n\n✍️ @React_lib","datePublished":"2024-07-23T10:57:33Z","dateModified":"2024-07-23T10:57:33Z","author":{"@type":"Organization","name":"React","url":"https://telemetr.io/en/channels/1689019175-react_lib","image":"https://img.tlmtr.io/c/1QiX2L/5276438899222232427?ty=x"},"publisher":{"@type":"Organization","name":"React","url":"https://telemetr.io/en/channels/1689019175-react_lib","image":"https://img.tlmtr.io/c/1QiX2L/5276438899222232427?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":751},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":5},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":8}]}},{"@type":"ListItem","position":13,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/en/channels/1689019175-react_lib/posts/566","url":"https://telemetr.io/en/channels/1689019175-react_lib/posts/566","mainEntityOfPage":"https://telemetr.io/en/channels/1689019175-react_lib/posts/566","headline":"Типы событий в React и TypeScript При работе с React и TypeScript вы часто сталкиваетесь с подобной ошибкой:…","articleBody":"Типы событий в React и TypeScript\n\nПри работе с React и TypeScript вы часто сталкиваетесь с подобной ошибкой:\n\nconst onChange = (e) => {};\nParameter 'e' implicitly has an 'any' type.\n;\n\nНе всегда понятно, какой тип следует присвоить элементу e внутри функции onChange.\nЭто может произойти с onClick, onSubmit или любым другим обработчиком событий, которые получают элементы DOM.\nК счастью, есть несколько решений:\n\nhttps://www.totaltypescript.com/event-types-in-react-and-typescript\n\n#react\n\n✍️ @React_lib","datePublished":"2024-07-22T12:42:19Z","dateModified":"2024-07-22T12:42:19Z","author":{"@type":"Organization","name":"React","url":"https://telemetr.io/en/channels/1689019175-react_lib","image":"https://img.tlmtr.io/c/1QiX2L/5276438899222232427?ty=x"},"publisher":{"@type":"Organization","name":"React","url":"https://telemetr.io/en/channels/1689019175-react_lib","image":"https://img.tlmtr.io/c/1QiX2L/5276438899222232427?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":760},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":4},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":14}]}},{"@type":"ListItem","position":14,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/en/channels/1689019175-react_lib/posts/565","url":"https://telemetr.io/en/channels/1689019175-react_lib/posts/565","mainEntityOfPage":"https://telemetr.io/en/channels/1689019175-react_lib/posts/565","headline":"🔥What’s the Hack? ЭКСПО! Этим летом с 1 по 10 августа прими участие в хакатоне от Экспобанк, реши задачу по с…","articleBody":"🔥What’s the Hack? ЭКСПО! Этим летом с 1 по 10 августа прими участие в хакатоне от Экспобанк, реши задачу по созданию системы управления клиентскими базами для компаний-партнеров Экспобанка и получи возможность забрать вознаграждение из призового фонда в 400.000 рублей!\n\nРегистрируйся на хакатон до 29 июля включительно: https://экспохак.рф\n\n🌐Хакатон пройдет в формате Онлайн - 9 дней интенсивной работы над проектом, а 10-го августа участники защищают свои решения перед представителями из компаний-партнеров Экспобанка!\n\n🚀Главная цель – создать единый механизм управления клиентскими базами, позволяющий оптимизировать взаимодействие с клиентами и предлагать различные услуги из разных компаний, входящих в число компаний-партнеров Экспобанка. . \n\n👨‍💻К участию приглашаются разработчики, Product менеджеры, IT-специалисты и бизнес-архитекторы.\n\nНа протяжении всего хакатона Вас ждут регулярные сессии с экспертами, которые помогут скорректировать Ваши идеи в нужно русло!\n\n📌Ключевые события хакатона: \n29 июля – Завершение подачи заявок\n1 августа – Церемония открытия\n2 и 5 августа – Индивидуальные сессии с экспертами\n7 августа – Общая встреча с экспертами \n10 августа – Финальный питч и Церемония закрытия \n\n🏆Успей зарегистрироваться на хакатон и побороться за призовой фонд в 400.000 рублей! What’s the Hack? ЭКСПО!\n\nПодробная информация и регистрация: https://экспохак.рф","datePublished":"2024-07-22T09:01:43Z","dateModified":"2024-07-22T09:01:43Z","author":{"@type":"Organization","name":"React","url":"https://telemetr.io/en/channels/1689019175-react_lib","image":"https://img.tlmtr.io/c/1QiX2L/5276438899222232427?ty=x"},"publisher":{"@type":"Organization","name":"React","url":"https://telemetr.io/en/channels/1689019175-react_lib","image":"https://img.tlmtr.io/c/1QiX2L/5276438899222232427?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":728},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":1}]}},{"@type":"ListItem","position":15,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/en/channels/1689019175-react_lib/posts/564","url":"https://telemetr.io/en/channels/1689019175-react_lib/posts/564","mainEntityOfPage":"https://telemetr.io/en/channels/1689019175-react_lib/posts/564","headline":"⚛️ Список из 4 ошибок React, которые совершает большинство разработчиков Как вы думаете, какая из них самая р…","articleBody":"⚛️ Список из 4 ошибок React, которые совершает большинство разработчиков\n\nКак вы думаете, какая из них самая распространенная?\n\n#react\n\n✍️ @React_lib","datePublished":"2024-07-15T09:51:31Z","dateModified":"2024-07-15T09:51:31Z","author":{"@type":"Organization","name":"React","url":"https://telemetr.io/en/channels/1689019175-react_lib","image":"https://img.tlmtr.io/c/1QiX2L/5276438899222232427?ty=x"},"publisher":{"@type":"Organization","name":"React","url":"https://telemetr.io/en/channels/1689019175-react_lib","image":"https://img.tlmtr.io/c/1QiX2L/5276438899222232427?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":932},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":3},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":13}]}},{"@type":"ListItem","position":16,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/en/channels/1689019175-react_lib/posts/563","url":"https://telemetr.io/en/channels/1689019175-react_lib/posts/563","mainEntityOfPage":"https://telemetr.io/en/channels/1689019175-react_lib/posts/563","headline":"Как создать библиотеку React components ESM+CJS ПРИМЕЧАНИЕ: Эта статья посвящена техническим аспектам создани…","articleBody":"Как создать библиотеку React components ESM+CJS\n\nПРИМЕЧАНИЕ: Эта статья посвящена техническим аспектам создания и публикации пакетов и предполагает, что вы уже знаете, как создавать компоненты React. Если вы не знакомы с React, я рекомендую сначала прочитать официальную документацию.\n\nСоздание (и публикация) хороших, небольших и простых в использовании библиотек немного сложнее, чем просто написание красивого, модульного и многократно используемого кода. Каждый язык и экосистема имеют свои особенности, в нашем случае мы сосредоточимся на экосистемах JavaScript и TypeScript, делая особый акцент на фронтенд-разработке.\n\nhttps://blog.coderspirit.xyz/blog/2023/09/15/create-a-react-component-lib/\n\n#react\n\n✍️ @React_lib","datePublished":"2024-07-11T10:19:09Z","dateModified":"2024-07-11T10:19:09Z","author":{"@type":"Organization","name":"React","url":"https://telemetr.io/en/channels/1689019175-react_lib","image":"https://img.tlmtr.io/c/1QiX2L/5276438899222232427?ty=x"},"publisher":{"@type":"Organization","name":"React","url":"https://telemetr.io/en/channels/1689019175-react_lib","image":"https://img.tlmtr.io/c/1QiX2L/5276438899222232427?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":1145},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":3},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":16}]}},{"@type":"ListItem","position":17,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/en/channels/1689019175-react_lib/posts/562","url":"https://telemetr.io/en/channels/1689019175-react_lib/posts/562","mainEntityOfPage":"https://telemetr.io/en/channels/1689019175-react_lib/posts/562","headline":"Совет по React-query 💡 Вам не нужно возиться с обработкой ошибок в каждом запросе. Вместо этого вы можете авт…","articleBody":"Совет по React-query 💡\n\nВам не нужно возиться с обработкой ошибок в каждом запросе. \n\nВместо этого вы можете автоматически вернуться к ближайшей границе ошибок, если какой-либо запрос не выполнился, с помощью одной глобальной настройки.\n\nКак? Включите глобальную настройку useErrorBoundary при объявлении QueryClient.\n\n#react\n\n✍️ @React_lib","datePublished":"2024-07-08T09:07:50Z","dateModified":"2024-07-08T09:07:50Z","author":{"@type":"Organization","name":"React","url":"https://telemetr.io/en/channels/1689019175-react_lib","image":"https://img.tlmtr.io/c/1QiX2L/5276438899222232427?ty=x"},"publisher":{"@type":"Organization","name":"React","url":"https://telemetr.io/en/channels/1689019175-react_lib","image":"https://img.tlmtr.io/c/1QiX2L/5276438899222232427?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":1038},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":6},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":7}]}},{"@type":"ListItem","position":18,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/en/channels/1689019175-react_lib/posts/561","url":"https://telemetr.io/en/channels/1689019175-react_lib/posts/561","mainEntityOfPage":"https://telemetr.io/en/channels/1689019175-react_lib/posts/561","headline":"Мучаетесь с разработкой на JavaScript и мечтаете о простоте и порядке в коде? Надоело изобретать велосипед и…","articleBody":"Мучаетесь с разработкой на JavaScript и мечтаете о простоте и порядке в коде? Надоело изобретать велосипед и тратить время на рутинные операции? \n\nПредставьте, что вы можете создавать сложные веб-приложения легко и непринужденно, используя мощь и элегантность Angular Framework. Dependency Injection больше не будет для вас тёмным лесом, а написание чистого, поддерживаемого кода станет приятной рутиной. \n\nВсё это станет реальностью на нашем открытом уроке «Angular Framework. Dependency Injection» 4 июля в 20:00 мск. \n\nПосле занятия вы сможете создавать приложение на Angular и разрабатывать простые компоненты с возможностью выделять бизнес-логику в специальные классы и сервисы.\n\nЗабирайте свой билет в мир профессиональной фронтенд-разработки! \nРегистрируйтесь прямо сейчас, чтобы не пропустить бесплатный урок: https://vk.cc/cy6bHs\n\nРеклама. ООО «Отус онлайн-образование», ОГРН 1177746618576, www.otus.ru","datePublished":"2024-07-02T11:01:16Z","dateModified":"2024-12-28T18:23:23Z","author":{"@type":"Organization","name":"React","url":"https://telemetr.io/en/channels/1689019175-react_lib","image":"https://img.tlmtr.io/c/1QiX2L/5276438899222232427?ty=x"},"publisher":{"@type":"Organization","name":"React","url":"https://telemetr.io/en/channels/1689019175-react_lib","image":"https://img.tlmtr.io/c/1QiX2L/5276438899222232427?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":1099},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":2}]}},{"@type":"ListItem","position":19,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/en/channels/1689019175-react_lib/posts/560","url":"https://telemetr.io/en/channels/1689019175-react_lib/posts/560","mainEntityOfPage":"https://telemetr.io/en/channels/1689019175-react_lib/posts/560","headline":"Один день из жизни инженера-программиста react native 😀 ✍️ @React_lib","articleBody":"Один день из жизни инженера-программиста react native 😀\n\n✍️ @React_lib","datePublished":"2024-07-02T09:33:34Z","dateModified":"2024-07-02T09:33:34Z","author":{"@type":"Organization","name":"React","url":"https://telemetr.io/en/channels/1689019175-react_lib","image":"https://img.tlmtr.io/c/1QiX2L/5276438899222232427?ty=x"},"publisher":{"@type":"Organization","name":"React","url":"https://telemetr.io/en/channels/1689019175-react_lib","image":"https://img.tlmtr.io/c/1QiX2L/5276438899222232427?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":988},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":2},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":4}]}},{"@type":"ListItem","position":20,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/en/channels/1689019175-react_lib/posts/559","url":"https://telemetr.io/en/channels/1689019175-react_lib/posts/559","mainEntityOfPage":"https://telemetr.io/en/channels/1689019175-react_lib/posts/559","headline":"Коварные утечки памяти в React: как можно обжечься на useCallback и замыканиях Я работаю в Ramblr, это ИИ-ста…","articleBody":"Коварные утечки памяти в React: как можно обжечься на useCallback и замыканиях\n\nЯ работаю в Ramblr, это ИИ-стартап, где мы строим на React сложные приложения для аннотирования видео. Недавно мне попалась сложная утечка памяти, которая возникает при одновременном использовании замыканий JavaScript и хука useCallback в React. Поскольку я вырос на .NET, мне потребовалось немало времени, чтобы разобраться в происходящем. Поэтому я решил написать этот пост и рассказать вам, чему меня научила эта ситуация.\n\nСначала я кратко напомню вам, как устроены замыкания, но можете смело пропустить этот раздел, если вы уже хорошо знаете, как устроен этот механизм в JavaScript.\n\nhttps://schiener.io/2024-03-03/react-closures\n\n✍️ @React_lib","datePublished":"2024-06-29T03:17:06Z","dateModified":"2024-06-29T03:17:06Z","author":{"@type":"Organization","name":"React","url":"https://telemetr.io/en/channels/1689019175-react_lib","image":"https://img.tlmtr.io/c/1QiX2L/5276438899222232427?ty=x"},"publisher":{"@type":"Organization","name":"React","url":"https://telemetr.io/en/channels/1689019175-react_lib","image":"https://img.tlmtr.io/c/1QiX2L/5276438899222232427?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":1105},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":4},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":26}]}}]}
React
2 680
Полиморфизм в React: 2 паттерна, которые нужно знать Независимо от того, создаете ли вы библиотеку или разрабатываете React-к
Полиморфизм в React: 2 паттерна, которые нужно знать Независимо от того, создаете ли вы библиотеку или разрабатываете React-компоненты для своих нужд, есть один прием, который вам необходимо знать: полиморфизм. Это когда один элемент может принимать несколько форм, например, когда кнопка может выступать в роли ссылки. При правильном использовании это может избавить вас от необходимости поддерживать множество вариантов компонентов, одновременно предоставляя пользователям необходимую гибкость. В этом тексте я покажу вам, как использовать два наиболее известных способа реализации полиморфизма в React: паттерны "as" и "asChild". https://www.bekk.christmas/post/2023/1/polymorphism-in-react #react ✍️ @React_lib

React
2 680
Дублирование JSX - верный признак того, что вам нужно создать компонент. Дублирование логики в компонентах - верный признак того, что вам, возможно, нужно создать пользовательский хук. Обратите внимание на слово *может* #react ✍️ @React_lib

React
2 680
⚛️ useEffect становится проще в React, когда вы перестаете использовать его для: 1. Выведения/вычисления нового состояния. 2. Инициализации состояния на основе props. 3. Получения данных. Вместо этого: 1. Делайте это в рендере. 2. Инициализируйте состояние в useState. 3. Используйте либо обработчики событий, либо react-query для этого. #react ✍️ @React_lib

React
2 680
⚛️ Быстрый совет по React ❌ Преобразование данных в useEffect. ✅ Делаем это во время рендеринга ↓ #react ✍️ @React_lib

React
2 680
❓React-компоненты работают медленно и требуют оптимизации? Хотите узнать, как сделать их быстрыми и эффективными? Ждем вас на
❓React-компоненты работают медленно и требуют оптимизации? Хотите узнать, как сделать их быстрыми и эффективными? Ждем вас на открытом вебинаре «Оптимизация работы компонентов в React.js» 6 августа в 19:00 мск, где мы разберём: - как работать с оптимизацией в React.js; - особенности работы функциональных компонентов и хуков; - трюк с мемоизацией коллбеков для списка элементов. Урок будет полезен как начинающим разработчикам React, так и опытным специалистам, которые хотят глубже изучить процесс мемоизации. Встречаемся в рамках курса «React.js Developer». Все участники вебинара получат специальную цену на обучение! 👉 Регистрация открыта: https://otus.pw/AXnVY/?erid=2VtzqwfLhcF Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576, www.otus.ru

React
2 680
⚛️ Как сделать контекстно-ориентированные хуки для запросов в React #react ✍️ @React_lib

React
2 680
useTransition в React #react ✍️ @React_lib

React
2 680
Самый быстрый способ передачи state в JavaScript В приложениях Redux с серверным рендерингом часто приходится передавать stat
Самый быстрый способ передачи state в JavaScript В приложениях Redux с серверным рендерингом часто приходится передавать state магазина с сервера на клиент. Передача больших state может быть медленной, поэтому в 2019 году Хенрик Йоретаг провел бенчмаркинг трех подходов, чтобы определить наиболее производительный способ:
// "Plain object":
window.__STATE__ = {"foo":"bar"}

// "Invalid mime type":
<script type="mime/invalid" id="myState">{"foo":"bar"}</script>
window.__STATE__ = JSON.parse(window.myState.innerHTML)

// "Just parse":
window.__STATE__ = JSON.parse("{\"foo\":\"bar\"}")
https://calendar.perfplanet.com/2023/fastest-way-passing-state-javascript-revisited/ #react ✍️ @React_lib

React
2 680
⚛️ Совет React 💡 Используйте строковые литералы + тип union в typescript для указания точных строковых значений в props #react ✍️ @React_lib

React
2 680
⚛️ Совет по React + Typescript Вы можете использовать `typeof` для типизации предполагаемых типов #react ✍️ @React_lib

React
2 680
🤘 Пройди хардкорный тест по JavaScript+Angular ✔️ Ответь на 20 вопросов и проверь свои знания. Сможешь сдать — пройдёшь на п
🤘 Пройди хардкорный тест по JavaScript+Angular ✔️ Ответь на 20 вопросов и проверь свои знания. Сможешь сдать — пройдёшь на продвинутый курс "Angular Developer". ⛔️ТЕСТ СМОГЛИ ПРОЙТИ ТОЛЬКО 40% УЧАСТНИКОВ ⏰ Время прохождения теста ограничено 25 минут ✍️ПРОЙТИ ТЕСТ: https://vk.cc/cyBjGu 💣 Пройдете тест и получите: ✔️ Живое общение с экспертами ✔️ Лучшие открытые уроки прошлых наборов курса ✔️ Продвинутые темы и практика на «боевых» задачах уровня Middle+ ✔️ Скидку на прохождение онлайн курса «Angular Developer» Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576, www.otus.ru

React
2 680
Довольно круто, что архитектура React Fiber позволяет избежать переполнения стека Этот рекурсивный компонент обычно переполня
Довольно круто, что архитектура React Fiber позволяет избежать переполнения стека Этот рекурсивный компонент обычно переполняется «Maximum call stack size exceeded». После этого PR он больше не будет переполняться #react ✍️ @React_lib

React
2 680
Типы событий в React и TypeScript При работе с React и TypeScript вы часто сталкиваетесь с подобной ошибкой: const onChange = (e) => {}; Parameter 'e' implicitly has an 'any' type. <input onChange={onChange} />; Не всегда понятно, какой тип следует присвоить элементу e внутри функции onChange. Это может произойти с onClick, onSubmit или любым другим обработчиком событий, которые получают элементы DOM. К счастью, есть несколько решений: https://www.totaltypescript.com/event-types-in-react-and-typescript #react ✍️ @React_lib

React
2 680
🔥What’s the Hack? ЭКСПО! Этим летом с 1 по 10 августа прими участие в хакатоне от Экспобанк, реши задачу по созданию системы
🔥What’s the Hack? ЭКСПО! Этим летом с 1 по 10 августа прими участие в хакатоне от Экспобанк, реши задачу по созданию системы управления клиентскими базами для компаний-партнеров Экспобанка и получи возможность забрать вознаграждение из призового фонда в 400.000 рублей! Регистрируйся на хакатон до 29 июля включительно: https://экспохак.рф 🌐Хакатон пройдет в формате Онлайн - 9 дней интенсивной работы над проектом, а 10-го августа участники защищают свои решения перед представителями из компаний-партнеров Экспобанка! 🚀Главная цель – создать единый механизм управления клиентскими базами, позволяющий оптимизировать взаимодействие с клиентами и предлагать различные услуги из разных компаний, входящих в число компаний-партнеров Экспобанка. . 👨‍💻К участию приглашаются разработчики, Product менеджеры, IT-специалисты и бизнес-архитекторы. На протяжении всего хакатона Вас ждут регулярные сессии с экспертами, которые помогут скорректировать Ваши идеи в нужно русло! 📌Ключевые события хакатона: 29 июля – Завершение подачи заявок 1 августа – Церемония открытия 2 и 5 августа – Индивидуальные сессии с экспертами 7 августа – Общая встреча с экспертами 10 августа – Финальный питч и Церемония закрытия 🏆Успей зарегистрироваться на хакатон и побороться за призовой фонд в 400.000 рублей! What’s the Hack? ЭКСПО! Подробная информация и регистрация: https://экспохак.рф

React
2 680
⚛️ Список из 4 ошибок React, которые совершает большинство разработчиков Как вы думаете, какая из них самая распространенная? #react ✍️ @React_lib

React
2 680
Как создать библиотеку React components ESM+CJS ПРИМЕЧАНИЕ: Эта статья посвящена техническим аспектам создания и публикации п
Как создать библиотеку React components ESM+CJS ПРИМЕЧАНИЕ: Эта статья посвящена техническим аспектам создания и публикации пакетов и предполагает, что вы уже знаете, как создавать компоненты React. Если вы не знакомы с React, я рекомендую сначала прочитать официальную документацию. Создание (и публикация) хороших, небольших и простых в использовании библиотек немного сложнее, чем просто написание красивого, модульного и многократно используемого кода. Каждый язык и экосистема имеют свои особенности, в нашем случае мы сосредоточимся на экосистемах JavaScript и TypeScript, делая особый акцент на фронтенд-разработке. https://blog.coderspirit.xyz/blog/2023/09/15/create-a-react-component-lib/ #react ✍️ @React_lib

React
2 680
Совет по React-query 💡 Вам не нужно возиться с обработкой ошибок в каждом запросе. Вместо этого вы можете автоматически верн
Совет по React-query 💡 Вам не нужно возиться с обработкой ошибок в каждом запросе. Вместо этого вы можете автоматически вернуться к ближайшей границе ошибок, если какой-либо запрос не выполнился, с помощью одной глобальной настройки. Как? Включите глобальную настройку useErrorBoundary при объявлении QueryClient. #react ✍️ @React_lib

React
2 680
Мучаетесь с разработкой на JavaScript и мечтаете о простоте и порядке в коде? Надоело изобретать велосипед и тратить время на
Мучаетесь с разработкой на JavaScript и мечтаете о простоте и порядке в коде? Надоело изобретать велосипед и тратить время на рутинные операции? Представьте, что вы можете создавать сложные веб-приложения легко и непринужденно, используя мощь и элегантность Angular Framework. Dependency Injection больше не будет для вас тёмным лесом, а написание чистого, поддерживаемого кода станет приятной рутиной. Всё это станет реальностью на нашем открытом уроке «Angular Framework. Dependency Injection» 4 июля в 20:00 мск. После занятия вы сможете создавать приложение на Angular и разрабатывать простые компоненты с возможностью выделять бизнес-логику в специальные классы и сервисы. Забирайте свой билет в мир профессиональной фронтенд-разработки! Регистрируйтесь прямо сейчас, чтобы не пропустить бесплатный урок: https://vk.cc/cy6bHs Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576, www.otus.ru

React
2 680
Один день из жизни инженера-программиста react native 😀 ✍️ @React_lib

React
2 680
Коварные утечки памяти в React: как можно обжечься на useCallback и замыканиях Я работаю в Ramblr, это ИИ-стартап, где мы стр
Коварные утечки памяти в React: как можно обжечься на useCallback и замыканиях Я работаю в Ramblr, это ИИ-стартап, где мы строим на React сложные приложения для аннотирования видео. Недавно мне попалась сложная утечка памяти, которая возникает при одновременном использовании замыканий JavaScript и хука useCallback в React. Поскольку я вырос на .NET, мне потребовалось немало времени, чтобы разобраться в происходящем. Поэтому я решил написать этот пост и рассказать вам, чему меня научила эта ситуация. Сначала я кратко напомню вам, как устроены замыкания, но можете смело пропустить этот раздел, если вы уже хорошо знаете, как устроен этот механизм в JavaScript. https://schiener.io/2024-03-03/react-closures ✍️ @React_lib