How to write React hooks with called functions?

Question

I have a useQuery() hook:

const useQuery = () => {
  const router = useRouter();
  const build = (query) => {}
  const read = () => {}
}
export default useQuery;

I want to be able to use hook in my code like:

const query = useQuery();

useEffect(()=>{
  const oldQuery = query.read();
  if(oldQuery.length === 0) query.build(newQuery);
},[])

but every time I try to call query.read() I get error Property 'read' does not exist on type 'void'. It looks like scope issue. How can I fix it?

Nicholas Tower · Accepted Answer · 2022-04-25 17:26:36Z

2

You need a return statement in useQuery:

const useQuery = () => {
  const router = useRouter();
  const build = (query) => {}
  const read = () => {}

  return { router, build, read }
}

You may also want to consider memoizing these functions, so that code which consumes this hook doesn't do unnecessary work because it thinks the functions have changed:

const build = useCallback((query) => {}, []);
const read = useCallback((() => {}, []);

answered Apr 25, 2022 at 17:26

Nicholas Tower

87k10 gold badges115 silver badges127 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to write React hooks with called functions?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related