Files F100846800

useUpdateLayoutEffect.js
No OneTemporary
Actions

Subscribers

None

File Metadata

Created: Mon, Feb 3, 05:57

useUpdateLayoutEffect.js
View Options

	import { useLayoutEffect, useRef } from 'react';
	/**
	* Runs a layout effect only when the dependencies have changed, skipping the
	* initial "on mount" run. Caution, if the dependency list never changes,
	* the effect is never run
	*
	* ```ts
	* const ref = useRef<HTMLInput>(null);
	*
	* // focuses an element only if the focus changes, and not on mount
	* useUpdateLayoutEffect(() => {
	* const element = ref.current?.children[focusedIdx] as HTMLElement
	*
	* element?.focus()
	*
	* }, [focusedIndex])
	* ```
	* @param effect An effect to run on mount
	*
	* @category effects
	*/

	function useUpdateLayoutEffect(fn, deps) {
	var isFirst = useRef(true);
	useLayoutEffect(function () {
	if (isFirst.current) {
	isFirst.current = false;
	return;
	}

	return fn();
	}, deps);
	}

	export default useUpdateLayoutEffect;

Event Timeline