How to fix React(TypeScrtipt) error "Invalid hook call."?

Question

I got error: "Invalid hook call. Hooks can only be called inside of the body of a function component." in react function:

interface Items {
  items: any[]
}

const [items, setItems] = useState<Items>();

const ItemsList: React.FC<Items> = ({ items }) => {
  useEffect(() => {
    const response = Http.get<Items>(url).then(res => setItems(res)) || [] as Items[]
  }, []) //something wrong with this hook?

  return (
      <ul>
        {items.map((item) => {
          return (
            <ItemPreview key={item.id} item={item}/>
          );
        })}
      </ul>
  )
}

export default ItemsList

I can't understand what I did wrong? can anyone show me where is error?

pretty much exactly what the error message says: you're calling the useState hook before your function component is declared. — Matt Morgan
– Matt Morgan, Commented Jan 14, 2021 at 17:20
Move const [items, setItems] = useState<Items>(); right above useEffect(() => { and below ItemsList: React.FC<Items>. — Sam R.
– Sam R., Commented Jan 14, 2021 at 17:21

resynth1943 · Accepted Answer · 2021-01-14 17:30:58Z

1

You need to call React Hooks from within a component, like so:

interface Items {
  items: any[]
}

const ItemsList: React.FC<Items> = ({ items }) => {
  const [items, setItems] = useState<Items>();
 
  useEffect(() => {
    const response = Http.get<Items>(url).then(res => setItems(res)) || [] as Items[]
  }, []);

  return (
      <ul>
        {items.map((item) => {
          return (
            <ItemPreview key={item.id} item={item}/>
          );
        })}
      </ul>
  )
}

export default ItemsList

See the Rules of Hooks for more information:

Only Call Hooks from React Functions

Don’t call Hooks from regular JavaScript functions. Instead, you can:

✅ Call Hooks from React function components.

✅ Call Hooks from custom Hooks.

answered Jan 14, 2021 at 17:30

resynth1943

614 bronze badges

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

3 Comments

Lex2000 Over a year ago

Thank you.I fixed error like @Sam R.said, before your answer (you need also remove { items } ), and now I have another error :) "Object is possibly 'undefined'. In "items.map" line.

Thomas Fox Over a year ago

This is correct. It might also be worth you checking out this blog post about avoiding race conditions when making api calls within a useEffect hook. flufd.github.io/avoiding-race-conditions-use-current-effect

resynth1943 Over a year ago

@eu97 Not sure if it's of any use to you, but I use use-async-resource with <Suspense /> boundaries.

Collectives™ on Stack Overflow

How to fix React(TypeScrtipt) error "Invalid hook call."?

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related