re render on state change with useEffect

Question

App won't re render different data on state change.

State does change in the dev tools but doesn't show on page.

Using button to filter.

export const StoriesPage = () => {
  const [storyIds, setStoryIds] = useState([]);
  const [storyUrl, setStoryUrl] = useState('top');

  useEffect(() => {
    let url = baseUrl;

    storyUrl === 'top'
      ? (url += 'topstories.json')
      : (url += 'newstories.json');

    getStoryIds(url).then(data => setStoryIds(data));
  }, [storyUrl]);

  return (
    <div>
      <div>
        <button onClick={() => setStoryUrl('new')}>New</button>
        <button onClick={() => setStoryUrl('top')}>Top</button>
      </div>
      {storyIds.map((storyId, index) => (
        <Story key={index} storyId={storyId} />
      ))}
    </div>
  );
};

Answer 1

Added a function that clears storyIds before setStoryUrl

  const handleFilter = tag => {
    setStoryIds([]);
    setStoryUrl(tag);
  };