How to combine custom hooks and selector results?

Question

I have a custom hook and also have some selectors and need a final flag to be set based on a combination of the two. I can't simply write a function that combines the code below cos neither hooks or selectors can be used outside a react FC

What's the best way to make the whole block like this a single reusable function somewhere?

// selector
    const { activeIntents, writeRole, intents, permalink } = useSelector(state => state.companyIntentsReducer);
// custom hook
    const { hasExtendedRoleForCompany } = useJwtRoles();
// func calling the custom hook
    const intentWrite = hasExtendedRoleForCompany("intent-manage-write", permalink);
// final result combines both
    const editMode = writeRole && intentWrite

can custom hooks use selectors?

Answer 1

You should write a custom hook, something like:

const useEditMode = () => {
  const { activeIntents, writeRole, intents, permalink } = useSelector(
    (state) => state.companyIntentsReducer
  );

  const { hasExtendedRoleForCompany } = useJwtRoles();
  const intentWrite = hasExtendedRoleForCompany(
    "intent-manage-write",
    permalink
  );

  return { isEditMode: writeRole && intentWrite };
};

export default useEditMode;

// Usage inside function component
const { isEditMode } = useEditMode();