How do I stop the re-rendering of my react component? It rerenders for every object in a drop down

After building the homepage of my website I finally figured out how to dynamically navigate to other pages. I wanted the browser to render the State homepage when a user clicked on a dropdown and selected a state. The navigation works, but it re-renders the component 50 times which I do not understand. I suspect it is due to the map function that is creating the menuitems. I could build out 50 individual menuitems but that is really ugly.

I am just starting out learning React. I have 7 YRS experience in backend development, but I am still trying to get a handle on React development. I have created a wepage with Material UI that has a dropdown that looks like this

<FormControl>
  <InputLabel>Select a State</InputLabel>
  <Select value={location} onChange={selectionChangeHandler}>
    {locations.map((value) => (
     <MenuItem value={value.toLowerCase()} key={value.toLowerCase()} component={Link} to={`${value.toLowerCase()}/home`} >
      {value}
     </MenuItem> 
    ))}
  </Select>
</FormControl>

This returns a dropdown with the 50 states in it. When the user clicks on a state I want the program to route to that page on click. This dynamic routing works BUT. It re-renders my component 50 times. I think this is happening because the dropdown is being built inside of a .map functions and there are 50 entries in that list.

I can remove the map function and hardcode in 50 menuitems but that is ugly.

Here is my onChange Function

const selectionChangeHandler = (event) => {
console.log(event.target.value) 
}

I have also tried removing the component={Link} and using the useNavigate hook in the selectionChangeHandler like so

const selectionChangeHandler = (event) => {
    console.log(event.target.value)
    setlocation(event.target.value)
    link = `${event.target.value}/home`
    navigate(link)

  }

This works but also renders 50 times. I am at a loss.

I cross posted the above to reddit and then I researched a little more. It turns out in React. When a parent component's state is updated it re-renders all child components. This may be what is going on here, but I do not know how to fix it. Even if I pass the state as a prop to the child component I still have to link to the correct page.

I am kind of nervous about posting I really tried to put work into solving my own problem before reaching out for help, and I might be reaching out for help a lot as I learn. I am committed to learning, but some problems I just cannot figure out on my own.

Link to Code Link to Code

The problem here is inside StateHome.js. You use a naked axios.get call directly in your component so it's going to re-render anytime the component changes from state change.

When you get the results you set state inside the same component which re-renders the component, which then re-runs the axios.get call, causing the loop.

I understand you want to call that endpoint when someone lands on the /alabama/home page. To tell React "Do this one time when the component loads" you must use a useEffect with an empty dependency array. So instead of this:

const StateHome = () => {
  const { location } = useParams();
  const [PageData, SetPageData] = useState();
  axios.get(`http://localhost:4000/${location}/home`).then((response) => {
    console.log(response.data);
    console.log(response.status);
    console.log(response.statusText);
    console.log(response.headers);
    console.log(response.config);
    SetPageData(response.data);
  });
  return <h1>This is my State Home Page Component for State {location}</h1>;
};

You need to use this:

const StateHome = () => {
  console.log("StateHome");
  const { location } = useParams();
  const [PageData, SetPageData] = useState();

  useEffect(() => {
    axios.get(`http://localhost:4000/${location}/home`).then((response) => {
      console.log(response.data);
      console.log(response.status);
      console.log(response.statusText);
      console.log(response.headers);
      console.log(response.config);
      SetPageData(response.data);
    });
  }, []); // <--- indicates "on mount", loads once regadless of other side-effects (setState)
  
  return <h1>This is my State Home Page Component for State {location}</h1>;
};