0xD34F

Я так понимаю, вот она, причина, подъехала с версией 18.0.0:

Consistent useEffect timing: React now always synchronously flushes effect functions if the update was triggered during a discrete user input event such as a click or a keydown event.

Т.е., жмёте на кнопку, открывается окно, запускается эффект, устанавливается обработчик клика на document, дальше событие клика по кнопке продолжило всплывать и попало в только что установленный обработчик.

При добавлении задержки, данная проблема уходит

Можете ещё попробовать ловить событие в фазе погружения:

document.addEventListener('click', handleOutsideClick, true);
return () => document.removeEventListener('click', handleOutsideClick, true);

const components = [
  [   'Day', Components1 ],
  [  'Week', Components2 ],
  [ 'Month', Components3 ],
  [  'Year', Components4 ],
];

const [ active, setActive ] = useState(-1);
const Component = components[active]?.[1];
const onClick = e => setActive(+e.target.dataset.index);

{components.map((n, i) => <button data-index={i} onClick={onClick}>{n[0]}</button>)}
{Component && <Component />}

ключ уже есть

А потом раз - и ключа нет, undefined - это не ключ. Откуда берётся undefined? Из-за отсутствия свойства id, значение которого должно быть ключом. Как оно пропадает? Да вот так:

return {
  ...emojis, count: emoji.count + 1
}

С какой целью вы делаете свойствами элемента массива все элементы самого массива?

Здесь, в разделе "props", вы можете найти способ получения экземпляра карты.

А здесь, в разделе "методы", вы можете узнать, как, имея на руках экземпляр карты, получить нужные вам координаты.

Передавайте в Winner не количество голосов, а элемент smiles целиком. Да, Math.max получить его не поможет, придётся самостоятельно перебирать массив в поисках максимума.

const Winner = ({ winner }) => winner
  ? <div>{winner.text}: {winner.value}</div>
  : null;

class App extends React.Component {
  state = {
    winner: null,
    smiles: [ 128540, 128520, 128640, 128526, 128566 ].map((n, i) => ({
      id: i + 1,
      text: String.fromCodePoint(n),
      value: 0,
    })),
  }

  vote(index) {
    this.setState(({ smiles }) => ({
      winner: null,
      smiles: smiles.map((n, i) => i === index
        ? { ...n, value: n.value + 1 }
        : n
      ),
    }));
  }

  showWinner = () => {
    this.setState(({ smiles }) => ({
      winner: smiles.reduce((max, n) => max.value > n.value ? max : n),
    }));
  }

  render() {
    const { smiles, winner } = this.state;

    return (
      <div>
        <ul>
          {smiles.map((n, i) => (
            <li key={n.id}>
              <button onClick={() => this.vote(i)}>{n.text}: {n.value}</button>
            </li>
          ))}
        </ul>
        <button onClick={this.showWinner}>show winner</button>
        <Winner winner={winner} />
      </div>
    );
  }
}

checkWinner(id) {
    console.log({[id]: Math.max(...Object.values(this.state))})

onClick={checkWinner}

Внутри метода думаете, что получаете id, а на самом деле объект события клика. Используете этот объект как имя свойства другого объекта, но ключами могут быть только строки, так что объект события клика будет преобразован в строку. [object Object] - дефолтное строковое представление объекта. Всё.

https://reactcommunity.org/react-transition-group/...

https://jsfiddle.net/j3902ws1/

useEffect(() => {
  const timeoutID = setTimeout(nextSlide, 3000);
  return () => clearTimeout(timeoutID);
}, [ currentIndex ]);

setProducts(products => products.map(n => {
  const card = n.cards.find(m => m.id === id);
  return card
    ? {
        ...n,
        cards: n.cards.map(m => m === card
          ? { ...m, quantity: newQuantity }
          : m
        ),
      }
    : n
}));

function App() {
  const [ count, setCount ] = useState(() => +localStorage.getItem('count') || 0);

  useEffect(() => {
    localStorage.setItem('count', count);
  }, [ count ]);

  const onClick = e => setCount(count => count + +e.target.dataset.change);

  return (
    <div>
      <h1>Count: {count}</h1>
      <button onClick={onClick} data-change="+1">+</button>
      <button onClick={onClick} data-change="-1">-</button>
    </div>
  );
}

const sortedData = useMemo(() => {
  return data
    .pages
    .flatMap(n => n.data)
    .sort((a, b) => b.liked.length - a.liked.length);
}, [ data ]);

<div className="App">
  {sortedData.map((item) => (
    <div>
    ...

Что, "posts.map is not a function"? Давайте взглянем, что такое posts:

const [posts, setPosts] = useState([]);

Изначально это массив. У массивов map есть. А раз воспользоваться map'ом всё-таки не удаётся, значит, где-то вместо массива в качестве значения posts устанавливается какой-то мусор. Смотрим, где вызывается setPosts:

setPosts(fetchReq);

Окей, а что такое fetchReq? Давайте узнаем:

const fetchReq = fetch(`${fetchURL}/posts`).then(res => res.json());

Надо же, это промис. Зачем вы промис кладёте туда, где нужен массив? У промисов метода map нет. Надо дождаться выполнения этого промиса и передавать в setPosts результат. Исправляем:

fetch(`${fetchURL}/posts`)
  .then(r => r.json())
  .then(setPosts);

const amounts = [ 5, 10, 15 ];
const [ amount, setAmount ] = useState(null);
const [ isCustomAmount, setIsCustomAmount ] = useState(false);

{amounts.map(n => (
  <label>
    <input
      type="radio"
      disabled={isCustomAmount}
      checked={amount === n && !isCustomAmount}
      onChange={() => setAmount(n)}
    />
    ${n}
  </label>
))}
<label>
  <input
    type="checkbox"
    checked={isCustomAmount}
    onChange={e => (setAmount(null), setIsCustomAmount(e.target.checked))}
  />
  Другая сумма
</label>
{isCustomAmount && <input value={amount} onChange={e => setAmount(+e.target.value)} />}
<input type="hidden" name="amountusd" value={amount} />

const editTodo = (id, title) => {
  setTodos(todos.map(n => n.id === id
    ? { ...n, title }
    : n
  ));
};

function TodoItem({ complete, title, id, removeTodo, toggleTodo, editTodo }) {
  const [ isEdit, setIsEdit ] = useState(false);
  const [ editValue, setEditValue ] = useState('');

  return (
    <div className="todo-item">
      <input type="checkbox" checked={complete} onChange={() => toggleTodo(id)} />
      {isEdit
        ? <>
            <input value={editValue} onChange={e => setEditValue(e.target.value)} />
            <button onClick={() => (setIsEdit(false), editTodo(id, editValue))}>Save</button>
            <button onClick={() => setIsEdit(false)}>Cancel</button>
          </>
        : <span onDoubleClick={() => (setIsEdit(true), setEditValue(title))}>{title}</span>
      }
      <button onClick={() => removeTodo(id)}>X</button>
    </div>
  );
}

const dashoffset = circleRef.current - ...

Вычитаете из элемента? Умно. Конечно, в том случае, если вашей целью является получение NaN.

const getSctollTop = () => {
  return window.pageYOffset || document.documentElement.scrollTo;
}

А точно scrollTo? Это же метод, а вы вроде бы число хотите получить. Может, scrollTop?

React.useEffect(() => {
  ...
  window.addEventListener("scroll", () => {
    ...
  });

}, []);

Почему нет очистки эффекта?

const [ showAll, setShowAll ] = useState(false);
const defaultShow = 2;
const showAllByDefault = ingredients.length <= defaultShow;
const ingredientsToShow = (showAll || showAllByDefault)
  ? ingredients
  : ingredients.slice(0, defaultShow);

{showAllByDefault
  ? null
  : <button onClick={() => setShowAll(val => !val)}>{showAll ? 'hide' : 'show'}</button>
}
<ul>
  {ingredientsToShow.map(n => <li>{n}</li>)}
</ul>

function Typewriter({ text }) {
  const [ length, setLength ] = useState(0);

  useEffect(() => {
    setLength(0);

    const interval = setInterval(setLength, 100, length => {
      if (++length >= text.length) {
        clearInterval(interval);
      }

      return length;
    });

    return () => clearInterval(interval);
  }, [ text ]);

  return <div>{text.slice(0, length)}</div>;
}

nextEl: prevRef.current

Суть проблемы - current имеет значение null при первом рендеринге. Так что придётся заставить компонент отрендериться ещё раз. Например, можно это сделать путём сохранения ссылки на экземпляр swiper'а в стейт (да, с одной стороны костыль, с другой - наверняка пригодится в будущем):

const [ swiper, setSwiper ] = useState();

<Swiper
  onSwiper={setSwiper}
  ...

https://codesandbox.io/s/for-https-qna-habr-com-q-...

Или, так же получаете экземпляр swiper'а, но вырезаете к чёрту navigation, вместо того, чтобы передавать ref'ы в экземпляр компонента Swiper, добавьте элементам, которые должны выступать в роли кнопок, обработчики клика, где будут дёргаться методы slidePrev/slideNext:

- ref={prevRef}
+ onClick={() => swiper.slidePrev()}

https://stackblitz.com/edit/stackblitz-starters-rr...

срабатывает дважды, а в последующие разы увеличивается в разы

Всё правильно, получаете то поведение, какое описали, новое значение focus - новый обработчик:

useEffect(() => {
    window.addEventListener('keydown', onKeyPress);
}, [focus])

Старый-то вы не удаляете.

А вообще, есть способ получать актуальное значение focus без создания нового обработчика, так что вам и одного хватит:

useEffect(() => {
  const onKeyDown = ({ keyCode }) => {
    if (keyCode === 39) {
      setFocus(focus => focus + 1);
    }
  };

  window.addEventListener('keydown', onKeyDown);
  return () => window.removeEventListener('keydown', onKeyDown);
}, []);

state = {
  phones: [
    { id: 1, title: '', number: '' },
  ],
}

onChange = ({ target: { value, name, dataset: { index } } }) => {
  this.setState(({ phones }) => ({
    phones: phones.map((n, i) => +index === i
      ? { ...n, [name]: value }
      : n
    ),
  }));
}

addPhone = () => {
  this.setState(({ phones }) => ({
    phones: [
      ...phones,
      {
        id: 1 + Math.max(...phones.map(n => n.id)),
        title: '',
        number: '',
      },
    ],
  }));
}

delPhone = ({ target: { dataset: { index } } }) => {
  this.setState(({ phones }) => ({
    phones: phones.filter((n, i) => i !== +index),
  }));
}

render() {
  return (
    <div>
      {this.state.phones.map((n, i) => (
        <div key={n.id}>
          <input name="title" data-index={i} value={n.title} onChange={this.onChange} />
          <input name="number" data-index={i} value={n.number} onChange={this.onChange} />
          {i ? <button data-index={i} onClick={this.delPhone}>x</button> : null}
        </div>
      ))}
      <button onClick={this.addPhone}>Add</button>
    </div>
  );
}