interface User {   name: string }  class Factory {   public static getUser(name: string): User {     return { name }   } }  const user = Factory.getUser("Bob") // { name: "Bob" }  // Alternatively, without classes  function getUser(name: string): User {   return { name } }  const user = getUser("Bob") // { name: "Bob" } 

// Factory function that returns a new function that uses Hooks API. function createHook(initialValue: string) {   return function useHook() {     return React.useState(initialValue)   } }  // Create the hook. const useHook = createHook("some initial value")  // Use the hook in the component. // The component will output: "State is: some initial value" function Component() {   const [state] = useHook()   return (     <>       State is: <b>{state}</b>     </>   ) } 

// Factory function that returns a new function that uses Hooks API. function createMappedState(mapper: (value: string) => string) {   return function useHook(initialValue: string) {     const [state, setState] = React.useState(mapper(initialValue))      // Define a custom setter applying custom logic.     const setter = React.useCallback(       (value: string) => {         setState(mapper(value))       },       [setState]     )      // return a tuple to make API similar to React.useState     return [state, setter]   } }  // You can create as many custom hooks you need const useUppercasedString = createMappedState(value => value.toUpperCase()) const useLowercasedString = createMappedState(value => value.toLowerCase())  // Use the hook in the component. // The component will output: // ` // String is: SOME VALUE // String is: some value // ` function Component() {   const [string1, setString1] = useUppercasedString("Some Value")   const [string2, setString2] = useLowercasedString("Some Value")   return (     <>       String1 is: <b>{string1}</b>       <br />       String2 is: <b>{string2}</b>     </>   ) } 

function createSharedStateHook(initialValue: string) {   let sharedValue = initialValue    // An array in a shared scope.   // Produced hook will always refer to it.   const stateSetters: ((v: string) => void)[] = []    // This function will update all components   // that use the hook created by the factory.   function setAllStates(value: string) {     sharedValue = value     stateSetters.forEach(set => {       set(value)     })   }    return function useSharedState(): [string, (v: string) => void] {     const [state, setState] = React.useState(sharedValue)      React.useEffect(() => {       // On mount, add the setter to shared array.       const length = stateSetters.push(setState)       const index = length - 1       return () => {         // On unmount, remove the setter.         stateSetters.splice(index, 1)       }     }, [setState])      // The trick is to have the hook to return the same instance of `setAllStates`     // at all times so the update will propagate through all components using the produced hook.     return [state, setAllStates]   } }  const useSharedState = createSharedStateHook("initial") const useAnotherSharedState = createSharedStateHook("another initial")  // `useSharedState` and `useAnotherSharedState` do not share the same state // because returned hooks have access to different scopes.  function Component() {   const [sharedState] = useSharedState()   return (     <>       Shared state is: <b>{sharedState}</b>     </>   ) }  function AnotherComponent() {   const [sharedState] = useAnotherSharedState()   return (     <>       Another shared state is: <b>{sharedState}</b>     </>   ) }  function Modifier() {   const [sharedState, setSharedState] = useSharedState()   return (     <input       type="text"       value={sharedState}       onChange={e => setSharedState(e.target.value)}     />   ) }  function App() {   return (     <>       <Component />       <br />       <AnotherComponent />       <br />       <Component />       <br />       <Modifier />     </>   ) }