Ostic

Редьюсер должен возвращать новый state, ваш не возвращает ничего. Присваивать новый state локальной переменной бесполезно, да и вообще мутировать объект state нельзя.

Второй вариант почти правильный.
1. Событие добавляете внутри useEffect;
2. В deps передаете пустой массив;
3. В рендере можно написать проще, не используя шаблонную строку.

const PageSize = () => {
  const [pageSize, setPageSize] = useState([document.documentElement.scrollWidth, document.documentElement.scrollHeight]);

  const updatePageSize = () => setPageSize([document.documentElement.scrollWidth, document.documentElement.scrollHeight]);

  useEffect(() => {
    window.addEventListener('resize', updatePageSize);

    return () => {
      window.removeEventListener('resize', updatePageSize);
    };
  }, []);

  return (
    <div>
      <p>page width is {pageSize[0]}</p>
      <p>page height is {pageSize[1]}</p>
    </div>
  );
};

Потому что прототипы есть только у объектов, то есть у сущностей (entity) для которых верноtypeof entity === 'object'Правда тут есть одно исключение - в спеке нет типа function, а во всех реализациях он есть по историческим причинам. То есть с точки зрения спеки:typeof function(){} === 'object'а на деле:typeof function(){} === 'function'Поэтому правильное тождество будет такое:

typeof entity === 'object' || typeof entity === 'function'

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

1 instanceof Number
1 instanceof Object
'a' instanceof String
'a' instanceof Object
true instanceof Boolean
true instanceof Object
1n instanceof BigInt
1n instanceof Object
Symbol() instanceof Symbol
Symbol() instanceof Object
null instanceof Object
undefined instanceof Object

все эти выражения ложны, а как известно instanceof проверяет именно прототипы.

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

Object(1) instanceof Number
Object(1) instanceof Object
Object('a') instanceof String
Object('a') instanceof Object
Object(true) instanceof Boolean
Object(true) instanceof Object
Object(1n) instanceof BigInt
Object(1n) instanceof Object
Object(Symbol()) instanceof Symbol
Object(Symbol()) instanceof Object

все эти выражения истинны.
Однако надо понимать, что обертка - это уже не примитив:

typeof Object(1) === 'object'
typeof Object('a') === 'object'
typeof Object(true) === 'object'
typeof Object(1n) === 'object'
typeof Object(Symbol()) === 'object'

это все так же истинно.

А вот у юнит-типов (типов-значений) null и undefined таких оберток нет. И хотя Object(null) и Object(undefined) возвращают просто пустой объект, обратится к методам null и undefined нельзя:

null.property // TypeError: Cannot read property 'property' of null
undefined.property // TypeError: Cannot read property 'property' of undefined

Там, внутри самой спецификации, всё объясняется:

1. Internal Methods and Internal Slots:
   
   

   Internal methods and internal slots are identified within this specification using names enclosed in double square brackets...

   
   
2. Well-Known Symbols:
   
   

   Within this specification a well-known symbol is referred to by using a notation of the form @@name...

   
   
3. Well-Known Intrinsic Objects:
   
   

   Within this specification a reference such as %name% means the intrinsic object...

   
   

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

Вариант 1:

const CTX = React.createContext();

const App = () => (
  <CTX.Provider value={ctx}>
    <MyComponent />
  </CTX.Provider>
);

Но этот вариант не будет удобен если вы собираетесь тестировать компоненты использующие контекст.

Вариант 2:

const CTX = React.createContext(ctx);

const App = () => (
  <MyComponent />
);

Но этот вариант не будет удобен когда надо изменять значение контекста.

Поэтому, если собираетесь писать тесты, лучше передавать значение дважды, одно для тестов и одно для работы приложения.

Ой, ну это холиварная тема. На первый взгляд, webstorm из коробки может больше, чем VS Code. Но VS Code отлично допиливается расширениями, причем очень круто. Расширения пишутся тоже довольно легко, как к браузеру. Да и на мой взгляд, VS Code работает шустрее, чем webstorm, и жрет меньше памяти (я помню про electron) чем webstorm.

В React разработке приветствуется подход с изменением состояния:

interface State {
  shouldShowBtn: boolean;
}

class MyComponent extends React.Component<null, State> {
  state = {
    shouldShowBtn: true,
  };

  componentDidMount() {
    window.addEventListener('scroll', this.scrollHandler);
  }

  scrollHandler = () => {
    const { shouldShowBtn } = this.state;

    if (window.pageYOffset > 50 && shouldShowBtn) {
      this.setState({ shouldShowBtn: false });
    } else if (window.pageYOffset <= 50 && !shouldShowBtn) {
      this.setState({ shouldShowBtn: true });
    }
  };

  componentWillUnmount() {
    window.removeEventListener('scroll', this.scrollHandler);
  }

  render() {
    return (
      <>
       {this.state.shouldShowBtn && <button>lioih </button>}
      </>
    );
  }
}

или:

const MyComponent: React.FC = () => {
  const [shouldShowBtn, setShouldShowBtn] = useState(true);
  
  const context = useMemo(() => ({ shouldShowBtn }), []);

  useEffect(() => {
    context.shouldShowBtn = shouldShowBtn;
  }, [shouldShowBtn]);

  useEffect(() => {
    const scrollHandler = () => {
      if (window.pageYOffset > 50 && context.shouldShowBtn) {
        setShouldShowBtn(false);
      } else if (window.pageYOffset <= 50 && !context.shouldShowBtn) {
        setShouldShowBtn(true);
      }
    };

    window.addEventListener('scroll', scrollHandler);
    
    return () => {
      window.removeEventListener('scroll', scrollHandler);
    };
  }, []);
  
  return (
    <>
     {shouldShowBtn && <button>lioih </button>}
    </>
  );
};

Можно еще для подобных кейсов кастомный хук написать:

const useGetState = (initialState: any) => {
  const [state, _setState] = useState(initialState);
  const context = useMemo(() => ({ state }), []);
  const getState: any = useCallback(() => context.state, []);
  const setState = useCallback((state) => {
    context.state = state;
    _setState(state);
 }, []);

  return [getState, setState];
};

и тогда:

const MyComponent: React.FC = () => {
  const [getShouldShowBtn, setShouldShowBtn] = useGetState(true);

  useEffect(() => {
    const scrollHandler = () => {
      console.log(window.pageYOffset, getShouldShowBtn());
      if (window.pageYOffset > 50 && getShouldShowBtn()) {
        setShouldShowBtn(false);
      } else if (window.pageYOffset <= 50 && !getShouldShowBtn()) {
        setShouldShowBtn(true);
      }
    }
    window.addEventListener("scroll", scrollHandler);
    return () => {
      window.removeEventListener("scroll", scrollHandler);
    };
  }, []);
  return <div>{getShouldShowBtn() && <button>lioih </button>}</div>;
};

про то, как это вообще лучше в реакте делать, вам написал Антон Спирин, а конкретно проблему с тайпскриптовскими типами решить можно параметризовав тип референса:

const buttonEl = useRef<HTMLButtonElement>();
buttonEl.current.classList.add("is-hide");
return <button ref={buttonEl}>lioih</button>;

1. В таком случае, React надо подключать к странице внешней библиотекой. Например так:

<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>

2. У вас в tsconfig.js свойство allowSyntheticDefaultImports установленно в значении true.
Этот вариант удобней тем, что можно писать импорты вида:
import React, { useContext } from 'react';

В документации есть ответы на все ваши вопросы.
Redux: Immutable data
Redux: Immutable update patterns

Связано с механизмом работы самого redux и концепцией иммутабельности в него заложенной. Проверять через deepEqual что объект изменился это слишком дорогая операция, которая должна выполняться на каждый редьюсер. Подробнее можно почитать тут

Это Line Height

line-height: 1;

margin-top: -10px;