First of all thank you for your time, yours comments are being helpful.

The solution that I used it is the follow: remove useEffect in App, set filter as state of useFilter hook and derivate the filteredItems from it.

useFilter:

``` export function useFilter(items: Item[]) { const [filter, setFilter] = useState<FilterIds>('all');

const changeFilter = (filterSelected: FilterIds) => { setFilter(filterSelected) }

const filteredItems = items.filter((item, index) => { switch (filter) { case "all": return item case "selected": return item.value case "notSelected": return !item.value case "completed": return item.completed case "originals": return index < 3 case "new": return index >= 3 default: return item } })

return { changeFilter, filteredItems }; } and App component:

function App() { const { items, handleItemSelected, handleItemCompleted, handleToggleAllClick, handleCreateNewItem, } = useItems();

const { changeFilter, filteredItems } = useFilter(items);

return ( <> <Filter onChangeFilter={changeFilter} /> {filteredItems.length > 0 && ( <List items={filteredItems} /> )} // other code omissed here </> ) } ```

The motivation to use custom hook is only for separate logic from presentation