Custom react hook useToggle in Typescript

Question

I wrote custom hook for toggling booleand valuse:

import { useState } from 'react';

export function useToggle(initialValue: boolean) {
  const [value, setValue] = useState<boolean>(initialValue);

  const toggleValue = () => setValue(!value);

  return [value, toggleValue];
}

Then I use it like below:

 const [modalOpen, setModal] = useToggle(false);

But get errors:

Type 'boolean | (() => void)' is not assignable to type 'boolean | ((() => void) & false) | ((() => void) & true)'. Type '() => void' is not assignable to type 'boolean | ((() => void) & false) | ((() => void) & true)'. Type '() => void' is not assignable to type '(() => void) & false'. Type '() => void' is not assignable to type 'false'.

I was just working on the same thing. This is a great article fettblog.eu/typescript-react-typeing-custom-hooks You need to return [value, toggleValue] as const or add a return type to the useToggle function do return a tuple not an array — Rex
– Rex, Commented Oct 15, 2021 at 18:20

nightElf · Accepted Answer · 2020-02-13 17:40:55Z

5

You might need to define the return type of your hook. It should look something like this.

import { useState } from 'react';

export function useToggle(initialValue: boolean): [boolean, () => void] {
  const [value, setValue] = useState<boolean>(initialValue);

  const toggleValue = () => setValue(!value);

  return [value, toggleValue];
}

answered Feb 13, 2020 at 17:40

nightElf

5222 silver badges4 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

kyun · Accepted Answer · 2020-02-13 10:50:56Z

1

const {useRef, useState} = React;

function useToggle(initialState){
  const [value, setValue] = useState(initialState);
  const toggle = () => { setValue(!value) };
  
  return [value, toggle];
};

function App(){
  const [modal, setModal] = useToggle(false);
  return (
    <div>
      <button onClick={setModal}>Toggle!</button>
      {modal && <span>Toggle!!!!</span>}
    </div>
  )
}

ReactDOM.render(
  <App />, document.getElementById('root')
)

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id="root"></div>

answered Feb 13, 2020 at 10:50

kyun

10.4k9 gold badges36 silver badges79 bronze badges

4 Comments

heisenberg7584 Over a year ago

what do these scripts do? Why do we need them?

kyun Over a year ago

That is React as CDN! You don't need to care about that, you just see the code about yours

heisenberg7584 Over a year ago

but you didnt change anything, errors are still there

kyun Over a year ago

@heisenberg7584 I've just wrapped toggle() with {}. did you wrap like it?

Ofir Kariv · Accepted Answer · 2025-11-23 17:40:47Z

0

For any future reference, I think this solution is more accurate, considering the fact that multiple calls to this hook or calling it from useEffect can provide the wrong value.

export function useToggle(initialValue: boolean = false): [boolean, () => void] {
  const [isOpen, setIsOpen] = useState<boolean>(initialValue);
  const toggleChange = (()=>{
      setIsOpen(prev => !prev)
  })  
  return [isOpen, toggleChange]
}

answered Nov 23 at 17:40

Ofir Kariv

849 bronze badges

Collectives™ on Stack Overflow

Custom react hook useToggle in Typescript

3 Answers 3

Comments

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related