Алексей

1. Вы ввели "1", нажали кнопку: у родителя меняется состояние на {value: "1"}, Child обновляется первый раз
   
2. componentDidUpdate не срабатывает при первом рендере, поэтому в Child просто выводится Hello!
   
3. В инпуте все еще "1", вы нажали второй раз кнопку. Снова вызывается setState с {value: "1"}, но каждый вызов setState приводит к перерендеру компонента, поэтому после второго клика происходит обновление родителя и вслед за ним потомка
   
4. На второй перерендер у Child срабатывает componentDidUpdate, и т.к. состояние в потомке не определено, т.е. по дефолту равно null, то срабатывает условие в if в componentDidUpdate
   
5. Child обновляет свой state и записывает туда {value: "1"}, после снова обновляется, но т.к. теперь предыдущий state был равен null, а текущий {value: "1"}, то условие if в componentDidUpdate уже не выполняется
   
6. Добавляете в инпуте цифру "2", нажимаете кнопку. Родитель меняет состояние на {value: "12"} и обновляется вместе с потомком
   
7. И дальше ответ на ваш вопрос: у Child снова после обновления срабатывает componentDidUpdate. При этом предыдущее значение у него в state осталось то, что было записано в пункте 5 и текущее тоже равно этому же значению, т.е. в этом случае опять сработает if и в Child изменится состояние на {value: "12"}
   
8. Child снова обновляется после изменения своего состояния, срабатывает componentDidUpdate, предыдущее значение состояния value выводит "1", а текущее уже "12" так что if снова не срабатывает
   

<Normalize />
<App />

const transBoxes = useTransition(boxes, boxes => boxes, {
    from: { opacity: 0, width: 100, transform: "translateY(-100px)" },
    enter: { opacity: 1, transform: "translateY(0px)" },
    leave: [{ transform: "translateY(100px)", opacity: 0 }, { width: 0 }],
    config: {
      duration: 750
    }
  });

<Suspense fallback={<div>loading...</div>}>
  <Switch>
    <Redirect from="/" to="/documents" exact />

on: {
  onAfterEditStop(state, editor) {
    if(state.value != state.old) {
      webix.message(state.value);
      webix.message(editor.row);
      webix.message(editor.column);
    } 
  }
}

import formatDistance from "date-fns/locale/ru/_lib/formatDistance";
import formatRelative from "date-fns/locale/ru/_lib/formatRelative";
import localize from "date-fns/locale/ru/_lib/localize";
import match from "date-fns/locale/ru/_lib/match";
import formatLong from "date-fns/locale/ru/_lib/formatLong";
import buildLocalizeFn from 'date-fns/locale/_lib/buildLocalizeFn'

const monthValues = {
  narrow: ["Я", "Ф", "М", "А", "М", "И", "И", "А", "С", "О", "Н", "Д"],
  abbreviated: [
    "янв.",
    "фев.",
    "март",
    "апр.",
    "май",
    "июнь",
    "июль",
    "авг.",
    "сент.",
    "окт.",
    "нояб.",
    "дек."
  ],
  wide: [
    "январь",
    "февраль",
    "март",
    "апрель",
    "май",
    "июнь",
    "июль",
    "август",
    "сентябрь",
    "октябрь",
    "ноябрь",
    "декабрь"
  ]
};

const ruLocale = {
  formatDistance,
  formatLong,
  formatRelative,
  localize: {
    ...localize,
    month: buildLocalizeFn({
      values: monthValues,
      defaultWidth: "wide",
      defaultFormattingWidth: "wide"
    })
  },
  match,
  options: {
    weekStartsOn: 1,
    firstWeekContainsDate: 1
  }
};

export default ruLocale;

import ru from "date-fns/locale/ru";
import buildLocalizeFn from 'date-fns/locale/_lib/buildLocalizeFn'
  
  const monthValues = {
    narrow: ["Я", "Ф", "М", "А", "М", "И", "И", "А", "С", "О", "Н", "Д"],
    abbreviated: [
      "янв.",
      "фев.",
      "март",
      "апр.",
      "май",
      "июнь",
      "июль",
      "авг.",
      "сент.",
      "окт.",
      "нояб.",
      "дек."
    ],
    wide: [
      "январь",
      "февраль",
      "март",
      "апрель",
      "май",
      "июнь",
      "июль",
      "август",
      "сентябрь",
      "октябрь",
      "ноябрь",
      "декабрь"
    ]
  };

  ru.localize.month = buildLocalizeFn({
    values: monthValues,
    defaultWidth: 'wide',
    defaultFormattingWidth: 'wide'
  })