Как не рендерить всю таблицу заново при изменении стейта

В ANTd таблица не умеет следить за состоянием. Поэтому она полностью ререндерится при изменении стейта.

Нашел интересное: Ячейке таблицы можно сказать не обновляться если использовать при создании колонки shouldCellUpdate: (record, prevRecord) => boolean

То есть можно сравнить старое и новое значение, и если они совпадают ANTd не будет делать новый рендер ячейки

Сидишь работаешь, как вдруг:

Сброс состояние по key в React

В реакте есть классная особенность, можно сбрасывать состояние компонента с внутренним useState() если в компонент прокинуть key. Вот пример:

import { useState } from 'react';   
   
export default function App() {   
  const [version, setVersion] = useState(0);   
   
  function handleReset() {   
    setVersion(version + 1);   
  }   
   
  return (   
    <>   
      <button onClick={handleReset}>Reset</button>   
      <Form key={version} />   
    </>   
  );   
}   
   
function Form() {   
  const [name, setName] = useState('Taylor');   
   
  return (   
    <>   
      <input   
        value={name}   
        onChange={e => setName(e.target.value)}   
      />   
      <p>Hello, {name}.</p>   
    </>   
  );   
} 

Здесь <Form /> имеет свой внутренний стейт. В родительском компоненте мы присваиваем ему key, который храним в отдельном стейте. Когда нужно сбросить состояние формы, мы устанавливаем новый ключ, чем вызываем ререндер формы

Дока

Только что понял, что Джейсон Стейтем сын веб-разработчика

Люблю решать сложные задачки
или форматирование данных в Antd

Недавно общались со знакомой, ей нужна была помощь с форматированием данных в поле ввода. Суть в чем — у Antd есть свой встроенный форматер для ввода данных, но он довольно криво работает. И вот у знакомой возникла с ним проблема.

Сам с этим когда-то сталкивался. И пару раз выручал коллег на работе. Так что проблема достаточно распространённая. Делюсь решением:

1. Выносим форматирование в отдельную функцию
2. В инпут вставляем эту функцию
3. На ончендж сетаем в стейт новое значение, не забыв его обратно отформатировать
4. …
5. Профит!

Потестить решение в кодсандбоксе

Получил письмо от Яндекса, как выбрать работу и не пожалеть

На самом деле легко, не выбирать компанию, которая путает JavaScript и Java

Гитея конечно любит пугать 😁

А как надо было:
А надо было плашку зеленой показать. Это же успешная операция, зачем ее красной подсвечивать не понятно

Кажется Яндекс забил на закон о запрете рекламы ВПН

Люблю решать интересные и сложные задачки

Наткнулся на днях на задачку про программиста и сто дверей:

Перед программистом сто закрытых дверей. Он проходит все двери, столько раз, сколько всего дверей. Если номер двери кратен номеру прохода, то меняет ее состояние: закрытую открывает, а открытую — закрывает. Нужно сказать какие двери останутся открытые.

В самой задаче дано 2 решения, как решали бы математики и как решали бы программисты на питоне. Но программисты там почему-то глупые — не пользуются математическим решением и совсем не думают о быстродействии.

Поэтому стало интересно решить эту задачу на JS, и использовать для ее решения минимальное число операций. Делюсь тем, что получилось ↑

А вот тут можно потыкать код

Использование только определенных браузеров

История с использованием только конкретных браузеров, кажется странной и непонятной. Особенно если это какой-то локальный браузер, построенный на чужих технологиях. Вот что такого есть в АПИ Яндекс браузера, чего нет в Chrome, Brave или Arc?

Кто не знает, все эти браузеры построены на движке Chromium, а значит, под капотом используют одно и то же АПИ. Значит, и сайты на них будут работать одинаково.

Вообще, это странная история, использовать технологии, которые не будут адекватно работать в других браузерах. Да, конечно, у нас есть caniuse, чтобы смотреть, все ли браузеры используют новые АПИ. Но вот что такого в последнее время выходило, без чего нельзя обойтись на фронте? 

Все последние апишки не то чтобы сильно ускоряют работу. Максимум, что они могут принести — ускорение на пару миллисекунд и сокращение кода на пару строк. Если у вас логика на сайте отрабатывает дольше 50 мс — проблема не в отсутствии нового АПИ, а в дерьмовом коде.

Что такое использует лэндинг медклиники, без чего он не может обойтись? Все, что нужно от их сайта — <input type="tel" />, чтобы телефон кликабельный был и форма обратной связи. Если не писать сложную валидацию полей, можно даже без JS обойтись. И грузить весь сайт за 100-200 мс

Короче, пишите нормальный код, а не упарывыйтесь в технологи.

Еще один браузер не как у всех

Мне тут пришла в голову мысль – разработчикам нужен браузер, который содержит в себе только те методы и API, которые гарантировано есть во всех остальных браузерах

Если вся разработка будет вестись под него, то мы никогда не столкнемся с тем, что в каком-то браузере что-то не работает

Нашел эталонного мидла

В обновлениях лучше ничего не писать, чем писать такой бред

Если вы обновляете приложение, то значит этим обновлением вы либо закрываете какую-то задачу пользователя, например фиксите багу, либо выкатываете новую фичу.

И об этом принято сообщать пользователю, чтобы он понимал, что получит от обновления. Может ему и старой версии достаточно.

Как видим команда яндекс музыки не делает ни того ни другого, за то ртом ловит снежинки. Зачем сообщать об этом пользователю не понятно. Пользователь и так видит, что команда яндекс музыки ничего не делает.

А могли бы наконец сделать удобное создание плейлистов