Search as a filter not working properly

[fabio-carvalho88]

Problem

When following search as a filter storybook example this happens:

Screen.Recording.2024-05-28.at.19.32.49.mov

Does anyone know how to fix it or a workaround to it?

[fabio-carvalho88]

we can't fully follow the storybook example, which relies on logic that happens behind the scenes.

In my case, I've ended up creating a useSearch custom hook which receives the table data as prop.

useSearch hook will allow me to toggle the search and store the current search value (just like in the storybook example). the only extra thing I've added is a filter to the table data:

const filteredData = useMemo(() => {
    return data.filter(({ c }) => c.includes(searchValue));
  }, [data, searchValue]);

This is a simple solution which makes me wonder why the problem recorded in the video above happens.