useRafState.md

useRafState

Vue state hook that only updates state in the callback of requestAnimationFrame.

Usage

import {useRafState, useMount} from 'vue-next-use';

const Demo = {
  setup(){
      const [state, setState] = useRafState({
          width: 0,
          height: 0,
      });

      useMount(() => {
          const onResize = () => {
              setState({
                  width: window.clientWidth,
                  height: window.height,
              });
          };

          window.addEventListener('resize', onResize);

          return () => {
              window.removeEventListener('resize', onResize);
          };
      });

      return () => <pre>{JSON.stringify(state, null, 2)}</pre>;
  }
};