React Component keeps re-rendering

Question

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
        })
    }
}

Answer 1

When you assign the method setPage as an event handler to the onClick event, you are 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>