Почему появляется бесконечный цикл в моем коде?

Волшебно! Все работает! Спасибо большое, Alexandroppolus. Немного погуглил, и понял что часто используют location c хуками useLocation + useEffect, но немного у меня не получалось как хотелось. Ваш код зашел в точку. Еще раз спасибо.

Почему появляется бесконечный цикл в моем коде?

Switcher имеет такой вид...

import React from 'react';
import './Switcher.scss';

export default function Switcher({ ...props }) {
	return (
		<div className='switcher'>
			<h3>{props.title}</h3>
			<div className='box'>
				<input
					type='checkbox'
					onClick={props.onClick}
					value={props.value}
					id={props.id}
				/>
				<label htmlFor={props.id}></label>
				<div className='labels df'>
					<p className='label-lt'>{props.label_lt}</p>
					<p className='label-rt'>{props.label_rt}</p>
				</div>
			</div>
		</div>
	);
}

Как поменять хеш с помощью input (React)?

Нашел еще вариант - через useLocation

Использовать react-router-dom библиотеку.

Оттуда, импортируйте useLocation, если вы используете функциональные компоненты:

import { useLocation } from 'react-router-dom';

Затем добавьте его в переменную:

const location = useLocation();

Затем вы можете использовать его как обычно:

location.pathname

PS: возвращаемый locationобъект имеет только пять свойств:

{ hash: "", key: "", pathname: "/" search: "", state: undefined__, }

Как сделать мультиязычный сайт на чистом JS?

Согласен, Сергей с Вами, можно было и не париться, но в моей истории надо именно в таком формате.
Есть еще один вариант через hash, но работает нестабильно, точнее чтобы переключть язык нужно нажать 2 раза на кнопку. Я переписал бы функцию setLang, да только не знаю как. В JS я пару месяцев, так что буду признателен за любую помощь. А код такой (hash)

const langArr = {
	h1: {
	   en: 'Text',
	   ru: 'Teкст',
	},

	btn: {
            en: 'Learn more',
	    ru: 'Узнать больше',
	},
};

const langEn = document.querySelector('#lang-en');
const langRu = document.querySelector('#lang-ru');

langEn.addEventListener('click', setLang.bind(null, 'en'));
langRu.addEventListener('click', setLang.bind(null, 'ru'));

function setLang() {
   let hash = window.location.hash.substr(1);

   for (let key in langArr) {
	let elem = document.querySelector('.lng-' + key);
	if (elem) {
		elem.innerHTML = langArr[key][hash];
	}
   }
}

Как включать / выключать функцию одной кнопкой?

Да, все просто. Например функция createContent() имеет такой вид

function createContent() {
 console.log('show!');
}

Теперь о моих "хотелках" - при первом нажатии в консоль выводилась show!, а при повторном нажатии - она исчезала. Вот и все. Конечно можно было сделать, как обычно через classList.toggle(), но функция у меня немаленькая, поэтому хочу по другому как-то это реализовать.