How to call a function onClick which is defined in React Hooks useEffect()? - reactjs

Question

useEffect(() => {
//Calling this function
const handleClick = () => {
const lazyApp = import("firebase/app")
const lazyStore = import("firebase/firestore")
//Some code here
}
}, [])
//Calling the function here
<MDBBtn
to=""
className="btn p-0 btn-white bg-transparent"
title="Add To Cart"
onClick={handleClick}
>
<FontAwesomeIcon
icon={faShoppingCart}
style={{ fontSize: "1.3rem" }}
/>
</MDBBtn>
I am trying to call a function after a button click event. But, I want that function to be defined inside useEffect() due to some reasons. I get the error that handleClick is not defined. What is the solution for this?

Answer 1

Because you can't. That's not how it works. useEffect — without a second param— works like componentDidMount lifecycle. The function you're calling has already been called when the component is mounted.
I don't know for what reason you're trying to call an onclick function inside of an useEffect, I've never seen anything like that.

Answer 2

I found this article describing how to implement in a class component:
componentDidMount() {
const lazyApp = import('firebase/app')
const lazyDatabase = import('firebase/database')
Promise.all([lazyApp, lazyDatabase]).then(([firebase]) => {
const database = getFirebase(firebase).database()
// do something with `database` here,
// or store it as an instance variable or in state
// to do stuff with it later
})
}
In your case you will need to mimic that componentDidMount via useEffect and implement some click handler.
You could try to do the following:
let lazyApp, lazyDatabase;
useEffect(() => {
lazyApp = import("firebase/app");
lazyDatabase = import("firebase/firestore");
}, []);
const handleClick = (e) => {
e.preventDefault();
Promise.all([lazyApp, lazyDatabase]).then(([firebase]) => {
const database = getFirebase(firebase).database()
// do something with `database` here,
// or store it as an instance variable or in state
// to do stuff with it later
})
};
This is untested, but maybe that will help.

Answer 3

Even though this seems weird and like an anti-pattern, this is how you could implement it. Using a useRef to keep the reference for your function.
Please check if you really need to do this.
function App() {
console.log("Rendering App...");
const click_ref = React.useRef(null);
React.useEffect(()=>{
function handleClick() {
console.log("Running handleClick defined inside useEffect()...");
}
console.log("Updating click_ref...");
click_ref.current = handleClick;
},[]);
return(
<React.Fragment>
<div>App</div>
<button onClick={()=>click_ref.current()}>Click</button>
</React.Fragment>
);
}
ReactDOM.render(<App/>, document.getElementById("root"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.3/umd/react-dom.production.min.js"></script>
<div id="root"/>