0xD34F

Метод connect не модифицирует переданный ему компонент, а создаёт новый.

Tак что правильно будет

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(App);

Ещё у вас в types отсутствует INITIALIZE, надо добавить.

Свойство обновилось, а объект тот же остался. Вместо изменения свойств надо объект копировать:

case 'TURN_DONE_POST':
  return {
    ...state,
    data: state.data.map(n => n.id === action.payload
      ? { ...n, done: !n.done }
      : n
    ),
  };

https://ru.reactjs.org/docs/conditional-rendering....

Во-первых - сложите значения фильтров в отдельный объект, не надо делать их свойствами непосредственно стейта.

Во-вторых:

const filterByProps = Object.entries(this.state.filters).filter(n => n[1]).map(n => n[0]);
const filteredItems = this.state.items.filter(n => filterByProps.every(m => n[m]));

onChange={this.props.filterItems}

filterItems = ({ target: { name, checked } }) => {
  this.setState({
    [name]: checked,
  });
}

<Route path="/:id" component={SinglePhoto} />
<Route path="/history" component={SearchHistory} />

Switch рендерит первый подходящий Route, так что history вы пытаетесь отображать с помощью SinglePhoto.

Поменяйте их местами.

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

В родительском компоненте:

<Child onChange={onChange} />

В дочернем:

useEffect(() => props.onChange(val), [ val ]);

https://jsfiddle.net/su2az6of/

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

https://jsfiddle.net/su2az6of/1/

Знаю, но не скажу. Читайте документацию.

По-видимому, при каждом рендере назначается новый обработчик клика. Потому что назначаете вы его неправильно. Вместо получения экземпляра маркера и вызова events.add, передавайте onClick в Placemark; объект с данными (city, address и т.д.) унесите в properties и получайте его внутри обработчика:

const onPlacemarkClick = e => {
  const placemarkData = e.get('target').properties.get('placemarkData');
  ...
};

<Placemark
  onClick={onPlacemarkClick}
  properties={{
    placemarkData: {
      city: point.City,
      address: point.Address,
      ...
    },
    ...
  }}
  ...
/>

Как в данном случае правильно сделать...

Структуру данных менять нельзя

"Правильно" - никак. Непонятно, откуда должен будет взяться section.

Так что структуру данных изменить всё-таки придётся.

get searchtest() {
  const search = this.state.search.toLowerCase().trim();
  return search
    ? searchtest.filter(n => Object.values(n).some(m => m.toLowerCase().includes(search)))
    : searchtest;
}

UPD. Это ещё что за ерунда? Вот здесь:

{this.searchtest.map((kef, i, a) => (
  <div style={style}>
    <div key={kef.name} data-id={kef.name}>
      name: {kef.name}
    </div>
    <div key={kef.id} data-id={kef.id}>
      id: {kef.id}
    </div>
  </div>
))}

Ключи вместо вложенных элементов должны быть у их общего предка:

{this.searchtest.map(n => (
  <div key={n.id}>
    <div>name: {n.name}</div>
    <div>id: {n.id}</div>
  </div>
))}

const Menu = ({ items }) =>
  items instanceof Array && items.length
    ? <ul>
        {items.map(n => (
          <li key={n.id}>
            <a>{n.title}</a>
            <Menu items={n.children} />
          </li>
        ))}
      </ul>
    : null;

Массив подсовываете в качестве значения.

setUser({ ...user, [name]: value })

const Gradient = ({ data, areaGenerator, height }) => {
  const ref = useRef(null);

  useEffect(() => {
    if (ref.current) {
      d3.select(ref.current)
        .append('linearGradient')
        .attr('id', 'area-gradient')
        .attr('gradientUnits', 'userSpaceOnUse')
        .attr('x1', 0)
        .attr('y1', 0)
        .attr('x2', 0)
        .attr('y2', height)
        .selectAll('stop')
        .data([
          { offset: '0%', color: 'rgba(101, 60, 173, 0)' },
          { offset: '100%', color: 'rgba(101, 60, 173, 0.2)' }
        ])
        .enter()
        .append('stop')
        .attr('offset', d => d.offset)
        .attr('stop-color', d => d.color);

      d3.select(ref.current).append('path').attr('class', 'area');
    }
  }, [ ref.current ]);

  useEffect(() => {
    if (ref.current) {
      d3.select(ref.current)
        .select('.area')
        .datum(data)
        .transition()
        .duration(1000)
        .attr('d', areaGenerator);
    }
  }, [ ref.current, data ]);

  return <g className="gradient-generator" ref={ref} />;
};

Всё вызывается.

Обновление стейта производится не сразу же после вызова setState. Так что когда вы в методе setTimer последовательно вызываете методы setState и countTime, последний имеет дело со старым значением state.sec.

Как добиться желаемого поведения... Нужная вам информация есть в документации.

const groupedArr = useMemo(() => {
  return Object.values(arr.reduce((acc, { dt, weather }) => {
    const [ date, time ] = dt.split(' ');
    acc[date] = acc[date] || { date, weather: [] };
    acc[date].weather.push({ time, weather });
    return acc;
  }, {}));
}, [ arr ]);

<ul>{groupedArr.map(n => (
  <li>
    <h3>{n.date}</h3>
    <ul>{n.weather.map(m => (
      <li>
        {m.time} - {m.weather}
      </li>))}
    </ul>
  </li>))}
</ul>

.test('fileSizes', 'Resolution at least 120x120px', value => {
  return new Promise(resolve => {
    const img = new Image();
    img.onload = () => resolve(img.width >= 120 && img.height >= 120);
    img.src = window.URL.createObjectURL(value);
  });
})

Группируете данные по месяцам:

const groupedUsers = users && users.reduce((acc, n) => {
  acc[new Date(n.dob).getMonth()].users.push(n);
  return acc;
}, [...Array(12)].map((n, i) => ({
  month: new Date(0, i).toLocaleString('ru-RU', { month: 'long' }),
  users: [],
})));

Рендерите их, например (это сразу всё; если надо - можете выбирать какой-то конкретный месяц):

{groupedUsers && groupedUsers.map(n => (
  <div key={n.month}>
    <h2>{n.month}</h2>
    {n.users.map(user => (
      <div key={user.id}>
        <h3>user #{user.id}</h3>
        <div>данные пользователя...</div>
      </div>
    ))}
  </div>
))}