React Component keeps re-rendering-CodePudding

In my page I am calling an action in my useEffect to populate my reducer. I have a component level state called page which is a parameter in the action. So every time the value of page changes I would like the action to be called again because obviously I intend to get the data from different pages.

Sadly I run into errors in the console telling me the component has reached its limit for times of re-rendering.

Here is the relevant code:

const Home = props => {

    const [page, setPage] = useState(1);

    useEffect(() => {
        props.getPopularMovies(page);
    }, [page])

My props.getPopularMovies function is coming from my mapDispatchToProps function which is being passed into connect()

Entire Home Page:

import React, { useEffect, useState } from 'react'
import { connect } from "react-redux";

// Actions
import { getPopularMovies } from "../actions/movies.action";

const Home = (props) => {

    const [page, setPage] = useState(1);

    useEffect(() => {
        props.getPopularMovies(page);
    }, [page])

    return (
        <div>
            {props.movies && props.movies.length > 0 && props.movies.data.results.map(movie => (
                <p key={movie.id}>{movie.title}</p>
            ))}
            <button onClick={setPage(page   1)}>Next Page</button>
        </div>
    )
}

const mapStateToProps = state => {
    return {
        movies: state.movies.movies
    }
}

export default connect(mapStateToProps, {
    getPopularMovies
})(Home)

Action File:

import axios from "axios";
import { GET_MOVIES_FAIL, GET_MOVIES_SUCCESS } from "../constants/movies.constants"

export const getPopularMovies = (page) => async (dispatch) => {
    try {
        const config = {
            params: {
                api_key: process.env.REACT_API_KEY,
                page
            
            }
        };

        const movies = await axios.get('/movie/popular', config);

        dispatch({
            type: GET_MOVIES_SUCCESS,
            payload: movies
        })
    } catch (err) {
        dispatch({
            type: GET_MOVIES_FAIL,
            payload: err
        })
    }
}

CodePudding user response：

Ok got the issue with your code ... What is happening is when you assign the method setPage as an event handler to onClick event, you are ending up invoking it instead of assigning it. So, instead of this:

...
<button onClick={setPage(page   1)}>Next Page</button>
...

try this

...
<button onClick={() => setPage(page   1)}>Next Page</button>
...