How to use useeffect hook in react?

Question

i want to return a function that uses useEffect from the usehook and i am getting error "useeffect is called in a function which is neither a react function component or custom hook.

what i am trying to do?

i have addbutton component and when user clicks add button i want to call the function requestDialog.

below is my code within addbutton file

    function AddButton () {
        const count = useGetCount();
        const requestDialog = useRequestDialog(); //using usehook here
        const on_add_click = ()  => {
            requestDialog(count); //calling requestDialog here
        }

        return (
            <button onClick={on_add_click}>add</button>
        );  
    }

 
    interface ContextProps {
        trigger: (count: number) => void;
    }

    const popupContext = React.createContext<ContextProps>({
        trigger: (availableSiteShares: number) => {},
    });

    const usePopupContext = () => React.useContext(popupContext);

    export const popupContextProvider = ({ children }: any) => {
        const [show, setShow] = React.useState(false);
        const limit = 0;

        const dismiss = () => {
            if (show) {
                sessionStorage.setItem(somePopupId, 'dismissed');
                setShow(false);
            }

        };

        const isDismissed = (dialogId: string) =>
            sessionStorage.getItem(dialogId) === 'dismissed';

            const context = {
                trigger: (count: number) => {
                if (!isDismissed(somePopupId) && count <= limit) {
                    setShow(true);
                } else if (count > limit) {
                    setShow(false);
                }
            },
        };

        return (
            <popupContext.Provider value={context}>
                {children}
                {show && (
                    <Popup onHide={dismiss} />
                )}
            </popupContext.Provider>
        );
    };


    export function useRequestDialog(enabled: boolean,count: number) {
        return function requestDialog() { //here is the error
            const { trigger } = usePopupContext();
            React.useEffect(() => {
                trigger(count);
            }
        }, [count, trigger]);
     }

How to solve the error ""useEffect is called in a function which is neither a react function component or custom hook."

i am not knowing how to use useeffect and the same time use it in the addbutton component.

could someone help me with this. thanks

Is this a syntax error? your useRequestDialog looks weird to me. — Kid
– Kid, Commented Jul 22, 2020 at 12:21
i am new to using hooks and asking for help. i think the code could be made better. guide me thanks. — saritha
– saritha, Commented Jul 22, 2020 at 12:26

Siva Kondapi Venkata · Accepted Answer · 2020-07-22 12:09:09Z

2

useEffect method is like, useEffect(() => {}, []), But your usage in requestDialog is wrong. Try changing with following.

function requestDialog() {
  const { trigger } = usePopupContext();
  React.useEffect(() => {
    trigger(count);
  }, [count, trigger]);
}

answered Jul 22, 2020 at 12:09

Siva Kondapi Venkata

11.1k2 gold badges20 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

saritha Over a year ago

thanks but is the still the same. should i use useeffect in usehook or fucntional component. how to change it in that case.

Lhew Over a year ago

I think you should consider changing your approach to in order to accomplish what you need. You just can't create a useEffect outside a react component

saritha Over a year ago

@Lhew: could you please let me know how i can change the code better. thanks.

Collectives™ on Stack Overflow

How to use useeffect hook in react?

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related