Multiple useSelectors or one shared one?

Question

React

Hey!

The router has its own separate reducer and actions. In App.js, you need to get data from routerReducer.js, namely: page, url, metas, etc.

Actually, what is the best way to do this: use several useSelectors or one common one?

const router = useSelector((state) => state.router);

// или

const page = useSelector((state) => state.router.page);
const url = useSelector((state) => state.router.url);
const metas = useSelector((state) => state.router.metas);

In general, the first option is more convenient - there is less code, but maybe there are some pitfalls?

Answer 1

const {url, page, metas} = useSelector(({router}) => router);

Answer 2

const { page, url, metas } = useSelector((state) => state.router);