Whys is this useEffect not being triggered despite the location changing?

Question

I have this component, where im trying to trigger the useEffect, which should be triggered when the location changes.

const ChartContainer: React.FC<RouteComponentProps> = ({ history }) => {
  const location = useLocation();
  const { data, serverError } = useFetchChart(location.search);
  const isData = Array.isArray(data) && data?.length > 0;

  React.useEffect(() => {
    console.log('search');
  }, [location]);

  if (serverError) {
    history.push('/error');
  }

  if (isData) {
    return (
      <>
        <IntervalSelector />
        <Chart dataProp={convertData(data)} />
      </>
    );
  }
  return <Spinner />;
};
export default ChartContainer;

THe intervalSelector, allows me to change the queryparam

It looks like:

import React, { useEffect, useState } from 'react';

export const IntervalSelector = () => {
  const [selectedValue, setSelectedValue] = useState<string>('1d');

  const options = [
    '1m',
    '5m',
    '15m',
    '1h',
    '4h',
    '12h',
    '1d',
    '3d',
    '1w'
  ];

  useEffect(() => {
    const searchParams = new URLSearchParams(window.location.search);
    selectedValue && searchParams.set('interval', selectedValue);
    window.history.replaceState({}, '', `${window.location.pathname}?${searchParams}`);
  }, [selectedValue]);

  return (
    <>
      <select
        style={{
          position: 'absolute',
          left: 0,
          top: 0
        }}
        value={selectedValue || ''}
        onChange={(e) => {
          setSelectedValue(e.target.value);
        }}
      >
        {options.map((option) => (
          <option key={option} value={option}>
            {option}
          </option>
        ))}
      </select>
    </>
  );
};

So whenever i select "3d" for example, my url changes from

http://example.com/?interval=1d

to

http://example.com/?interval=3d

Doesnt that mean , that my useEffect in ChartContainer should be triggered? WHy isnt it being triggered?

It depends on how `useLocation` works. What `useLocation` are you using? — T.J. Crowder, Dec 03 '22 at 15:31
Also, the first step in debugging this is to **reduce** it to a [mre]. In so doing, you'll probably find the culprit, which isn't (of course) that `useEffect` is misbehaving. — T.J. Crowder, Dec 03 '22 at 15:33
import { RouteComponentProps, useLocation } from 'react-router-dom'; @T.J.Crowder on first render it returns ```{"pathname": "/", "search": "?interval=4h", "hash": ""}``` — mouchin777, Dec 03 '22 at 15:33
Try using `location.search` as a dependency, instead of just `location`, it's possible the hook is mutating the property rather than re-assigning the object. — Chris Hamilton, Dec 03 '22 at 15:39
@ChrisHamilton doesnt really change anything. I think the whole component should update anyway, so placing a console.log in the root of ChartContainer should trigger every time the location changes, but its not the case, its never being updated — mouchin777, Dec 03 '22 at 15:41
ah, well I see you're using `window.history.replaceState` to change the params, why do you think that would trigger the component to rerender? — Chris Hamilton, Dec 03 '22 at 15:43

Whys is this useEffect not being triggered despite the location changing?

0 Answers0