everyone! I'm facing this issue as suggested in the title. For any reason I can't get, the useEffect does not trigger when a prop, included in its depency array, changes.

The following are the summarized components

App.js

```js
import React from "react";
import history from "./Helpers/history";
import { Router, Switch, Route } from "react-router-dom";
import Home from "./Components/Home";
import UsersWrapper from "./Components/UsersWrapper";

const App = () => {

  return (

    <Router history={history}>
      <Switch>
        <Route exact path="/" component={Home} />
        <Route exact path="/users"><UsersWrapper isUserSearch={false}/></Route>
        <Route exact path="/users/:userName"><UsersWrapper isUserSearch={true}/></Route>
      </Swith>
    </Router>
  )
}
```

NavigationBar.jsx

```js
import React, { useCallback } from "react";
import {NavLink, useHistory} from "react-router-dom";
import Container from "react-bootstrap/Container";
import Navbar from "react-bootstrap/Navbar";
import Nav from "react-bootstrap/Nav";
import Form from "react-bootstrap/Form";
import FormControl from "react-bootstrap/FormControl";
import InputGroup from "react-bootstrap/InputGroup";
import Button from "react-bootstrap/Button";

const NavigationBar = ({isSearchForUsers}) => {

    const history = useHistory();

    const displayUser = useCallback( e => {
        e.preventDefault();
        console.log(e.target[0].value);
        const input = e.target[0].value;
        isSearchForUsers ? history.push(`/users/${input}`) : history.push(`/repositories/${input}`);
    }, []);

    return (
        <Navbar expand="lg" className="my-4 bg-secondary justify-content-center" sticky="top">
            <Container>
                <NavLink to="/" className="navbar-brand fs-1 fs-lg-4 text-white">Github API</NavLink>
                <Navbar.Toggle/>
                <Navbar.Collapse id="user-repository-navbar" className="fs-3 mt-2 mt-lg-0 ms-lg-3">
                    <Nav>
                        <NavLink to="/users" className="nav-link">Users</NavLink>
                        <NavLink to="/repositories" className="nav-link">Repositories</NavLink>
                    </Nav>
                    <Form onSubmit={ displayUser } className="ms-sm-auto mt-3 mt-lg-0">
                        <InputGroup>
                            <FormControl placeholder="Buscar"/>
                            <Button type="submit">BUSCAR</Button>
                        </InputGroup>
                    </Form>
                </Navbar.Collapse>
            </Container>
        </Navbar>
    );
};

export default NavigationBar;
```

UsersWrapper.jsx

```js
import React, { useEffect, useState } from "react";
import { useParams } from "react-router";
import { useDispatch, useSelector } from "react-redux";
import Container from "react-bootstrap/Container";
import Row from "react-bootstrap/Row";
import { getCurrentIndex } from "../Selectors";
import NavigationBar from "./NavigationBar";
import UserCard from "./UserCard";
import SpinnerWrapper from "./SpinnerWrapper";
import PaginationWrapper from "./PaginationWrapper";
import { consumeAPI } from "../Services/usersService";
import { urlGetUser, urlGetUsersOfAPagination } from "../Constants/links";
import { PER_PAGE } from "../Constants/general";
import { setIndex } from "../Actions/indexActions";

const UsersWrapper = ({isUserSearch}) => {

    console.log(isUserSearch);

    const dispatch = useDispatch();
    const {userName} = useParams();
    const [filteredUsers, setFilteredUsers] = useState([]);
    const [isLoading, setIsLoading] = useState(false);

    const index = useSelector(getCurrentIndex);

    useEffect(() => {
        dispatch(setIndex(1));
    }, []);

    useEffect(() => {
        console.log("Entering useEffect");

        setIsLoading(true);

        if( isUserSearch ) {
            const getAUser = async () => {
                try {
                    const response = await consumeAPI(urlGetUser(userName));
                    console.log(response);
                    if( response.status !== 200 ) return new Promise.reject("La API no ha devuelto la informaciòn de usuario");
                    setFilteredUsers(response.data);
                    setIsLoading(false);
                } catch(error) {
                    console.error(error);
                }
            }

            getAUser();
        } else {
            const getUsersOfAPagination = async () => {
                try {
                    const response = await consumeAPI(urlGetUsersOfAPagination( (index-1)*PER_PAGE ) || 1 );
                    console.log(response.data);
                    if( response.status !== 200 ) return new Promise.reject("La API no ha devuelto los usuarios contenidos en el ìndice de paginaciòn");
                    let specificInfoByUser = [];
                    const rawUser = response.data;
                    for( let i = 0; i<rawUser.length; i++) {

                        const getActualUsersOfAPagination = async () => {
                            try {
                                // console.log(user.url)
                                const info = await consumeAPI(rawUser[i].url);
                                if( info.status !== 200 ) console.error("La informaciòn del usuario " + info.data.id + " no pudo ser recuperada");
                                specificInfoByUser.push(info.data);
                                return;
                            } catch( error ) {
                                console.error(error);
                                throw new Error(error);
                            }
                        }

                        await getActualUsersOfAPagination();
                    }

                    setFilteredUsers(specificInfoByUser);
                    setIsLoading(false);

                } catch(error) {
                    console.error(error);
                }
            };

            getUsersOfAPagination();
        }

    }, [isUserSearch, index]);

    return (

        <Container>
            <NavigationBar isSearchForUsers={true}/>

            <Row>
                {/* En caso de existir, renderiza el usuario que ingresò el cliente en el cuadro de bùsqueda */}
                {/* Renders the user filled in the search box */}
                { !isLoading && userName && filteredUsers && <UserCard login={filteredUsers.login} avatar={filteredUsers.avatar_url} name={filteredUsers.name} company={filteredUsers.company} blog={filteredUsers.blog} location={filteredUsers.location} email={filteredUsers.email} key={filteredUsers.id} /> }

                {/* Renderiza 30 usuarios correspondientes a la paginaciòn en la que estè el cliente. Estos 30 usuarios renderizados se los trae desde la API */}
                {/* Renders 30 users corresponding to the pagination the client set. These 30 rendered users are fetched from API Github endpoint */}
                { !isLoading && !userName && filteredUsers && filteredUsers.map( user => <UserCard login={user.login} avatar={user.avatar_url} name={user.name} company={user.company} blog={user.blog} location={user.location} email={user.email} key={user.id} /> )}

                {/* Renderiza un spinner en caso de que la/s tarjeta/s no hayan sido todavìa devueltas por la API de Github */}
                {/* Renders a spinner in case the cards are being retrieved */}
                { isLoading && <SpinnerWrapper/> }
            </Row>

            {/* Renderiza la paginaciòn en caso de corresponder  */}
            {/* Renders the pagination */}
            { !userName && <PaginationWrapper /> }
        </Container>
    );
};

export default UsersWrapper;
```

At the beginning, the root page is rendered with its Home component that I didn't describe it here because it just renders "Hola" so far.[enter image description here](https://i.stack.imgur.com/KhVKL.png)

Then I perform a search on the search bar and it works well: [enter image description here](https://i.stack.imgur.com/STrVj.png). Notice that in the console logs, the line 21 of UsersWrapper shows the value of isUserSearch prop which is true; also, the line 37 shows "entering useEffect" which means the useEffect has been triggered: [enter image description here](https://i.stack.imgur.com/qHYJJ.png).

At last, I click on "Users" in the navigation bar and there it comes the explosion. As shown in the picture [enter image description here](https://i.stack.imgur.com/Zk5g9.png), an "Uncaught TypeError: filteredUsers.map is not a function" error pops-up because the useEffect didn't trigger and it means that the filteredUsers state variable keep containing a user object instead of an array of users that should have if the useEffect would have triggered. Looking the console logs again I see line 37 of UsersWrapper didn't run due to the useEffect itself didn't run. Also the logs show that the isUserSearch property variable does changed from true in the previous step to false in the current one, so I can't understand why this is happening.

Any suggestions?
Thank you!