Skip to main content


The useSingleEffect() hook works exactly like useEffect, except it is called only a single time when the component mounts. This helps with React's recent update to the useEffect hook which is being called twice on mount.


import { useSingleEffect } from 'react-haiku';


Effect executed only 0 time!
import { useState } from 'react';
import { useSingleEffect } from 'react-haiku';

export const Component = () => {
const [renderCount, setRenderCount] = useState(0);

useSingleEffect(() => {
setRenderCount(renderCount + 1);
}) // no dependency array needed

return <b>Effect executed only {renderCount} time!</b>