0xD34F

Вместо общего массива выбранных значений сделать отдельные для каждого из свойств.

Чтобы не дублировались чекбоксы, создавать их на основе уникализированных массивов значений свойства вместо массива данных.

Чтобы поменьше копипастить, оформить чекбоксы в отдельный компонент - принимает массив доступных значений, массив выбранных значений, функцию установки выбранных значений.

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

https://jsfiddle.net/bqyxa0kL/

Состояние компонента должно содержать три значения - индекс печатаемой строки, количество отображаемых символов, направление печати (печатаем или стираем, т.е., в какую сторону надо изменять количество отображаемых символов, увеличивать или уменьшать). Дальше понятно что - setInterval или рекурсивный setTimeout, изменяем количество отображаемых символов, если дошли до конца строки - меняем направление, дошли до начала - меняем направление и индекс строки. Вот как-то так:

const defaults = {
  index: 0,
  length: 0,
  step: 1,
};

function Typewriter({ strings, delay }) {
  const [ state, setState ] = useState(null);

  useEffect(() => {
    setState(() => ({...defaults}));
  }, [ strings ]);

  useEffect(() => {
    const timeoutId = setTimeout(setState, delay, ({...state}) => {
      state.length += state.step;
      if (state.length === strings[state.index].length) {
        state.step = -1;
      } else if (state.length === 0) {
        state.step = 1;
        state.index = (state.index + 1) % strings.length;
      }
      return state;
    });

    return () => clearTimeout(timeoutId);
  });

  return <div>{strings?.[state?.index]?.slice(0, state?.length)}</div>;
}

Надо запоминать индекс кликнутого li.

const defaultEdit = {
  index: -1,
  value: '',
};

function App() {
  const [ notes, setNotes ] = useState([...'12345']);
  const [ edit, setEdit ] = useState(defaultEdit);

  const onClick = ({ currentTarget: { dataset: { index } } }) =>
    setEdit({ index: +index, value: notes[index] });

  const onChange = ({ target: { value } }) =>
    setEdit(edit => ({ ...edit, value }));

  const onBlur = () => {
    setNotes(notes => notes.map((n, i) => i === edit.index ? edit.value : n));
    setEdit(defaultEdit);
  };

  return (
    <div>
      <ul>{notes.map((n, i) => (
        <li data-index={i} onClick={onClick}>
          {n}
        </li>))}
      </ul>
      <input
        value={edit.value}
        onChange={onChange}
        onBlur={onBlur}
      />
    </div>
  );
}

https://jsfiddle.net/fbex5azy/1/

Не выдумывайте, всё рендерится.

Почему видимых изменений нет? Потому что обновляете одно состояние, а рендер выполняете на основе другого, items в App и items в ElementsList - это разные массивы. Не надо никакого useState в ElementList, выполняйте рендер на основе prop'а; метод onDelete перенесите в App и тоже передавайте в ElementList через props.

Добавьте в дочерний компонент эффект, который будет зависеть от props'ов и обновлять состояние:

useEffect(() => setValue(props.value), [ props.value ]);

Это если прямо отвечать на спрошенное. Но действительно ли дочерний компонент должен хранить значение input'а у себя? Возможно, вы не конца понимаете, чего хотите, и вам надо узнать про подъём состояния.

Документация подсказывает, что есть такая штука, как

onClickCapture: A version of onClick that fires in the capture phase.

fitBounds:

// это массив ваших "точек"
const locations = [
  { lat: ..., lng: ... },
  { lat: ..., lng: ... },
  ...
];

const onLoad = map => {
  const bounds = new window.google.maps.LatLngBounds();
  locations.forEach(n => bounds.extend(n));
  map.fitBounds(bounds);
};

<GoogleMap
  onLoad={onLoad}
  ...
>
  {locations.map(n => <Marker position={n} />)}
</GoogleMap>

const [ items, setItems ] = useState([]);
const [ src, setSrc ] = useState('');

const onChange = e => {
  setSrc(e.target.value);
};

const onClick = () => {
  setSrc('');
  setItems([
    ...items,
    {
      id: 1 + Math.max(0, ...items.map(n => n.id)),
      src,
    },
  ]);
};

const onSortEnd = (iOld, iNew) => {
  setItems(([...items]) => (
    items.splice(iNew, 0, items.splice(iOld, 1)[0]),
    items
  ));
};

<div>
  <input value={src} onChange={onChange} />
  <button onClick={onClick}>add</button>
</div>
<SortableList onSortEnd={onSortEnd}>
  {items.map(n => (
    <SortableItem key={n.id}>
      <img src={n.src} />
    </SortableItem>
  ))}
</SortableList>

Как может работать то, что вы не используете?

<div className={classes.bar1}></div>

Класс bar1 есть, это хорошо. А почему нет bar? Плохо.

UPD. Ну и в целом многословно как-то. Зачем копипастить по двенадцать раз одно и то же? В createUseStyles заменяем все barN на

...Object.fromEntries(Array.from({ length: 12 }, (_, i) => [
  `bar${i + 1}`,
  {
    transform: `rotate(${i * 30}deg) translate(0, -130%)`,
    animationDelay: `${i * 0.1 - 1.2}s`,
  },
])),

А в компоненте Loader пусть будет так:

<div className={`${classes.loader} js--loader`}>
  {Array.from(
    { length: 12 },
    (_, i) => <div className={`${classes.bar} ${classes[`bar${i + 1}`]}`}></div>
  )}
</div>

Возникает проблема, что нужно нажать 2 раза на подсказку, чтобы она исчезла.

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

Может, вместо эффекта вам стоит вычислять массив подсказок в обработчике onChange:

const onChange = ({ target: { value } }) => {
  setVal(value);
  setPrintVariables(value.length > 1
    ? arrayVariables.filter(n => n.includes(value))
    : []
  );
};

<input value={val} onChange={onChange} />

??

Что, в одно ухо влетело, из другого вылетело? - один из косяков переехал сюда из предыдущего вопроса, вместо . здесь должны быть $:

'&:checked + .todo-item__span::before'

'&:checked + .todo-item__span::after'

Одной пустой строки недостаточно:

'content': '',

'content': '""',

'todo-item--checked': {
    'border': '2px solid #2196f3',
    ' box-shadow': '0 0 10px 3px #2196f3',
},

'todo-item--checked .todo-item__description': {
    'color': '#6495EDFF',
},

'todo-item--checked': {
  'border': '2px solid #2196f3',
  'box-shadow': '0 0 10px 3px #2196f3',
  '& $todo-item__description': {
    'color': '#6495EDFF',
  },
},

<div className={`
    ${classes['todo-item__description']}
    ${classes['todo-item--checked .todo-item__description']}
`}>

<div className={classes['todo-item__description']}>

Я так понимаю, вот она, причина, подъехала с версией 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
}

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