Kentavr16

Надо давать элементам списка уникальный ключ – атрибут key.
Так React поймёт, какие элементы удалены, добавлены.

Индекс массива не подходит для значения key. Нужно что-то уникальное, характерное для каждого элемента массива, что не изменится при изменении порядка, скажем.

В примере в вопросе, видимо, уникальны сами значения 1, 2, 3 – можно их использовать для атрибута key:

arr.map(el => <TimerComponent name={el} key={el} />)

Ну и массивы в стейте, помните, надо не мутировать, а заменять массив целиком на новый.

Чтобы не перерендерился каждый раз вложенный компонент, можно его «мемоизировать»: обернуть в React.memo(), снабдив функцией, которая сравнивает предыдущее состояние и новое, и делает вывод, надо ли перерендерить. Тут, например, не надо перерендерить, если N остался тот же. Упрощённый Codepen:
для сравнения в коде App закомментируйте-раскомментируйте соседние строки, чтобы вместо ItemMemo работал просто Item

В любом базе можно хранить. Вопрос в том, что проще - брать json из базы и парсить его внутри на нужные значения, или хранить все значения в отдельных полях в базе.
Это больше вопрос конкретного проекта и конкретного использования.
А так - со стороны базы - никаких проблем в этом нет. Можно хранить как text или блоб для bson

import React, { useState } from 'react';

export function App(props) {
  const [value, setValue] = useState( '');
  const [bg, setBg] = useState('red');
  const handleChange = event => {
    setValue(event.target.value);
    if(value.length < 5 || value.length>50){
      setBg('red')
    }
    else{
      setBg('')
    }
   
  };

  return (
    <div className='App'>
      <input
        type='text'
        value={value}
        onChange={handleChange}
        style={{  backgroundColor: bg}}
      />
      <pre>{value}</pre>
    </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);

fetch('https://site.com/api/get/json', {
headers: {
Accept: 'application/json',
Authentication: 'Bearer Token',
}
})
.then(resp => resp.json())
.then(json => console.log(json))

Само приложение маленькое, организовывать хранение стейта с помощью условного redux не вижу смысла

ну тогда просто храни в контексте

Приложения есть, например https://www.displayfusion.com/
https://www.nirsoft.net/utils/multi_monitor_tool.html
А встроенных возможностей нет
Но, честно говоря, мне кажется, запустить нужное приложение и нажать Win+Up, Win+Shift+(Left/Right) не очень долго.

Использовать подгтовеленные выражения:

connection.query('INSERT INTO your_table VALUES (?)', [text_to_insert], function(err, rows, fields) {
   if (err)
     console.log('Error Occurred');
 });

У тебя в тегах вебпак, а значит тебе нужны именно его алиасы.

Если ты используешь cra, то придётся костылить, через craco или подобное.

Это алиасы путей. Гуглить их.
https://dev.to/larswaechter/path-aliases-with-type...

То есть что условно лучше - огромная таблица с кучей строк или же большое количество таблиц в бд?

Очень правильный вопрос, но преждевременный.
С точки зрения нормализации, да и просто нормального написания запросов - одна огромная таблица с кучей строк. Для ускорения поиска по ней есть индексы.
Когда эта огромная таблица будет создавать проблемы, будете эти проблемы решать. При нормальном железе ориентироваться можно на 1млрд строк, обычно на таком кол-ве производительность InnoDB очень сильно деградирует. Кол-во ориентировочное, т.к. многое зависит от длины строки; при короткой строке, невысокой нагрузке и возможности ждать, будет работать.

Скорее всего тебе нужно 2 таблицы. Users и Tasks. Вторая - дочерняя и таким образом у одного юзера есть несколько тасков или ни одной.

Это называется Нормализация БД.

getElementsByClassName() возвращает не ваш input, а живую HTML-коллекцию с единственным элементом. У коллекции нет свойства value.

- let input = document.getElementsByClassName('form-control');
+ const input = document.querySelector('input.form-control');

Удобно работать с объектами Date.

const makeDate = HHMM => {
  const [H, M] = HHMM.split(':').map(Number);
  const D = new Date();
  D.setHours(H);
  D.setMinutes(M);
  D.setSeconds(0);
  return D;
};

const oo = n => n.toString().padStart(2, '0'); // 5 => '05'

const fillTime = (startHHMM, finishHHMM, intervalMinutes) => {
  let startDate = makeDate(startHHMM);
  let finishDate = makeDate(finishHHMM);
  if (startDate > finishDate) { // объекты Date можно так сравнивать
    [startDate, finishDate] = [finishDate, startDate]; // поменять местами
  }

  const dates = [];
  const D = new Date(startDate);
  while (D <= finishDate) {
    dates.push(new Date(D));
    D.setMinutes(D.getMinutes() + intervalMinutes);
  }

  return dates.map(D => [D.getHours(), D.getMinutes()].map(oo).join(':'));
};

console.log(fillTime('15:56', '18:15', 17));
// [ "15:56", "16:13", "16:30", "16:47", "17:04", "17:21", "17:38", "17:55", "18:12" ]

Эти ваши "гуру" просто ничего кроме примитивного PHPMyAdmin'а не знают. База ставится на хостинге, MySQL Workbench на рабочем компьютере. Подключение через ssh туннель, это штатная опция Workbench'а.