useToggle

[nikasepiskveradze]

This hook is implemented many times by many other developer, but i think for it's simplicity and learning purpose to other developers, we should upload this hook on site.

Basically, what this hook does is that, it takes an parameter with value true or false and toggles that value to opposite.
It's useful when we want to take some action into it's opposite action, for example: show and hide modal, show more/show less text, open/close side menu.

As you see, it has one parameter which only takes boolean value and default argument "false".

In this line we switch current value to it's opposite, useCallback hook returns the memorizes function reference and it's second argument "[]" empty array makes sure that returned function only defined once so it won't cause unnecessary rendering, also when we set the value in setState function we pass callback function to it, because every next value is computed from previous value, which guarantees fact that value will change to it's opposite value

const toggle = useCallback(() => setState(state => !state), []);

import { useCallback, useState } from 'react';

function useToggle(initialState = false) {
  const [state, setState] = useState(initialState);
  const toggle = useCallback(() => setState(state => !state), []);

  return [state, toggle];
}

export default useToggle;

[gragland]

Thanks for sharing this and sorry for responding so late! I think this would be great for usehooks. Would you mind doing a pull request for this with a typescript version as well?

[nikasepiskveradze]

Thanks for sharing this and sorry for responding so late! I think this would be great for usehooks. Would you mind doing a pull request for this with a typescript version as well?

Yes sure. I am going to do that as well