How to call a function as soon as the page loads without useEffect?

Question

So I have a pretty basic question but I have been having a hard time with it,

  const LiveIndex = (props) => {

    const [currentPage, setCurrentPage] = useState(0);
    const [isLoading, setLoading] = useState(false);
    const startLoading = () => setLoading(true);
    const stopLoading = () => setLoading(false);

    useEffect(() => {
        //After the component is mounted set router event handlers

        Router.events.on('routeChangeStart', startLoading);
        Router.events.on('routeChangeComplete', stopLoading);

        return () => {
            Router.events.off('routeChangeStart', startLoading);
            Router.events.off('routeChangeComplete', stopLoading);
        }
    }, [])

    const paginationHandler = (page) => {
        const currentPath = props.router.pathname;
        const currentQuery = props.router.query;
        currentQuery.page = (currentPage+1)


        props.router.push({
            pathname: currentPath,
            query: currentQuery,
        })
        setCurrentPage(currentQuery.page)
    }

    const backToLastPage = (page) => {
       
const currentPath = props.router.pathname;
 const currentQuery= props.router.query;
        
    currentQuery.page = currentPage-1;
    setCurrentPage(currentQuery.page) // THE code that breaks my code.


       
       


        props.router.push({
            pathname: currentPathh,
            query: currentQueryy,
        })}
  
        
       


    

    let content;
    if (isLoading) {
        content = (
            <div >
                <h2 class="loading-text">loading.</h2>
            </div>
        )
    } else {
        //Generating posts list
       
        content = (
            <div className="container">
                <h2> Live Games  - </h2>

                <div className="columns is-multiline">

                    <p>{props.games.name}</p>
                </div>
            </div>
        );
    }

    return (


        <>
            <div className={"container-md"}>
                <div>
                    {content}

                </div>

      {props.games.length ? (<a onClick={() => paginationHandler(currentPage)}>  moore </a>) : backToLastPage(currentPage)}

            </div></>

    )
}


export default withRouter(LiveIndex)

So this is among my code in my render method, everything is fine but I was the backToLastPage function to be triggered as soon as the first condition fails but this does not happen, nothing is being invoked, I have made sure my function works well by using this with an onClick property and everything worked well.

I think I'm missing something and would appreciate any help

EDIT - The function invoking has been fixed but due to that I'm unable to somehow set the state in my function, I have attached my entire piece of code.

Answer 1

Without seeing more of your code or setup, you can try this:

{props.games.length 
   ? (<a onClick={()=> paginationHandler(currentPage)}>  moore </a>) 
   : backToLastPage(currentPage)
}