Do I need a special import to use custom hooks in React ?

[coopterrones]

I get the following error when trying to useStore in my functional component

my code is as follows:

store.js

import create from "zustand";
import { useQuery } from "@apollo/client";
import { GET_ALL_COMPETITIONS } from "./GraphQL/queries";

export const useStore = create((set) => ({
  competition: null,
  getCurrentCompetition: () =>
    set((state) => ({ competition: queryCompetitions() })),
}));

const queryCompetitions = () => {
  const { error, loading, data } = useQuery(GET_ALL_COMPETITIONS);
  return data;
};
```
```functional component```
```
  const [compeitionFile, setCompetitionFile] = useState(null);

  const compeitionState = () => {
    const file = useStore((state) => state.competition);
  };
```


Please let me know if providing further info helps, thanks 

[olavoparno]

This is a hook rule being broken, you see, in order to use hooks or custom hooks you must follow the rules of:

• either calling it from a react function component e.g. function MyReactComponent() or calling from a custom hook preappended with the word use, so you would have to have your queryCompetitions renamed to useQueryCompetitions.

https://reactjs.org/docs/hooks-rules.html

[coopterrones]

Thanks! This is great. I figured I was doing something wrong with nesting. I really appreciate your response!