I have a screen A, a component B and a hook C.

The screen A renders the component B and executes its logic via the hook C.

Currently, in B I am rendering a list of pressable items:

function FilmCategoriesFilter({ // This is the component B
  defaultSelectedFilter = FILM_CATEGORIES[0],
}) { 
  const [selectedFilter, setSelectedFilter] = useState(FILM_CATEGORIES);
 
  return (
    <PressableList 
      data={FILM_CATEGORIES} 
      selectedItem={selectedFilter} 
      onPressItem={setSelectedFilter} 
    />
  );
}

In my hook C I need to receive a param category, which has to be the same as the B's state value.

I have thought to move the state from the component to the parent, and update it via callback. But, if I do it, I think the component B will not be reusable any more.

I mean, if I handle its state, the data which makes it work, outside of it, the component will pass from being a self-functional component to just a UI component which only works in the screen A.

Is this an anti-pattern? Any tips?

CodePudding user response：

Having the main view for a particular state be somewhat separated from the functionality that manipulates and changes that state is fine and normal, especially when the state needs to be shared among other components too.

One approach you can use for this situation to make it clear that a state is directly tied to a component but can be used elsewhere too would be to declare both the hook and the component in the same file, export both, and nothing else.

export const useSelectedFilter = (defaultSelectedFilter = FILM_CATEGORIES[0]) => {
  const [selectedFilter, setSelectedFilter] = useState(FILM_CATEGORIES);
  // put methods that manipulate the state here
  // then return an object with those methods along with the state and setter
  const doSomethingWithSelectedFilter = () => {
    // ...
  };
  return { selectedFilter, setSelectedFilter, doSomethingWithSelectedFilter }; 
};

export function FilmCategoriesFilter({
  selectedFilter,
  setSelectedFilter,
}) {
  return (
    <PressableList 
      data={FILM_CATEGORIES} 
      selectedItem={selectedFilter} 
      onPressItem={setSelectedFilter} 
    />
  );
}
// end of file

This lets you use useSelectedFilter in a parent component, while keeping it absolutely clear that useSelectedFilter implements logic primarily for use by FilmCategoriesFilter. It's still modular and reusable due to the custom hook.