История изменений

можно определить функцию useController в файле controller.ts внутри которого засунуть этот стейт и в return контроллера его прописать и затем использовать в компонентах примерно так:

geoCityController.ts:

type Props = {
..optional props
};

export function useGeoCityController(props: Props) {

 let { ..optioal props } = props;

 let [city, setCity] = useState('')

 return {
   city,
   setCity,
 }
}

any jsx:

export default function GetCity(props) {
  let { city, setCity } = useGeoCityController({ optioal props ..});  
  return (<div>city</div>);
}

а если есть возможность выбирать, используй лучше CustomElements из стандартов Web Components для компонентной организации фронтенд кода, они просты и элегантны и работают в любом современном бравзере без транспиляторов и библиотек. Для межкомпонентного взаимодействия там можно использовать браузерные эвенты Custom Events или инжектить сервисные классы, на хабре я писал статью про это.

можно определить функцию useController в файле controller.ts внутри которого засунуть этот стейт и в return контроллера его прописать и затем использовать в компонентах примерно так:

geoCityController.ts:

type Props = {
..optional props
};

export function useGeoCityController(props: Props) {

 const { ..optioal props } = props;

 let [city, setCity] = useState('')

 return {
   city,
   setCity,
 }
}

any jsx:

export default function GetCity(props) {
  const { city, setCity } = useGeoCityController({ optioal props ..});  
  return (<div>city</div>);
}

а если есть возможность выбирать, используй лучше CustomElements из стандартов Web Components для компонентной организации фронтенд кода, они просты и элегантны и работают в любом современном бравзере без транспиляторов и библиотек. Для межкомпонентного взаимодействия там можно использовать браузерные эвенты Custom Events или инжектить сервисные классы, на хабре я писал статью про это.

можно определить функцию useController в файле controller.ts внутри которого засунуть этот стейт и в return контроллера его прописать и затем использовать в компонентах примерно так:

geoCityController.ts:

export function useGeoCityController() {
 let [city, setCity] = useState('')

 return {
   city,
   setCity,
 }
}

any jsx:

export default function GetCity(props) {
  const { city, setCity } = useGeoCityController({ optioal props ..});  
  return (<div>city</div>);
}

а если есть возможность выбирать, используй лучше CustomElements из стандартов Web Components для компонентной организации фронтенд кода, они просты и элегантны и работают в любом современном бравзере без транспиляторов и библиотек. Для межкомпонентного взаимодействия там можно использовать браузерные эвенты Custom Events или инжектить сервисные классы, на хабре я писал статью про это.

можно определить функцию useController в файле controller.ts внутри которого засунуть этот стейт и в return контроллера его прописать и затем использовать в компонентах примерно так:

controller.ts:

export function useController() {
 let [city, setCity] = useState('')

 return {
   city,
   setCity,
 }
}

any jsx:

export default function GetCity(props) {
  const { city, setCity } = useController({ optioal props ..});  
  return (<div>city</div>);
}

а если есть возможность выбирать, используй лучше CustomElements из стандартов Web Components для компонентной организации фронтенд кода, они просты и элегантны и работают в любом современном бравзере без транспиляторов и библиотек. Для межкомпонентного взаимодействия там можно использовать браузерные эвенты Custom Events или инжектить сервисные классы, на хабре я писал статью про это.