0xD34F

использую библиотеку rc-slider, к сожалению она не предлагает возможности...

А если изучить документацию повнимательнее? Есть пример с выводом значения в тултипе при перетаскивании, сделать тултип постоянно видимым не проблема.

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

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

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

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

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 useChunked = (data, chunkSize) =>
  useMemo(
    () => Array.prototype.reduce.call(
      data,
      (acc, n, i) => ((acc[i / chunkSize | 0] ??= []).push(n), acc),
      []
    ),
    [ data, chunkSize ]
  );

const ChunkedListItem = ({ item }) =>
  <pre>{JSON.stringify(item, null, 2)}</pre>;

const ChunkedList = ({ items, inRow, Item = ChunkedListItem }) => {
  const rows = useChunked(items, inRow);

  return (
    <div className="chunked-list">
      {rows.map(row => (
        <ul>
          {row.map(n => <li><Item item={n} /></li>)}
        </ul>
      ))}
    </div>
  );
}

https://jsfiddle.net/7pq92ud8/1/

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>

const languages = [
  { name:  'Ru', Component: AppRu  },
  { name: 'Eng', Component: AppEng },
  ...
];

const [ language, setLanguage ] = useState(0);
const { name, Component } = languages[language];
const onClick = () => setLanguage((language + 1) % languages.length);

<button onClick={onClick}>{name}</button>
<Component />

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

<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']}>