use-head-refs

useHeadRefs ( React hook )

What the purpose ?

useHeadRefs is a simple React Hook to keep the last values & objects references on a constant hashmap/object.

Ok, but what the purpose ?

When we define functions, the accessible variables are those that where present when the function was defined.
This force us to redefine functions on most redraw, or use complex state management & reducers.

This Hook, allow us to keep functions unique as they can access the last value throught the RefMap

Code ( so simple )

export default function useHeadRefs( refs ) {
	const scope = React.useRef({}).current;
	
	Object.assign(scope, refs);
	
	return scope;
}

Sample

import useHeadRefs from "use-head-refs";

export default ( {
	                 style,
	                 ...props
                 } ) => {
	const
		slideQuery                        = Hooks.useQuery(
			"Slides",
			{
				params: { orderBy: { _created: -1 } }
			}
		),
		[selectedIndex, setSelectedIndex] = React.useState(0),
		locals                            = useHeadRefs(
			{
				slideQuery,
				selectedIndex
			}
		),
		api                               = React.useMemo(
			() => (
				{
					doSomeStuff: () => {
						// locals.slideQuery is updated on any render
						// so functions in the api object does'nt need to be re-created
						// this avoid rerender / updating listeners 
					}
				}
			),
			[]
		);
	
	return <div className={"HomePage"}>
		{/*  */}
	</div>;
};