question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Hooks failure on functional component as root

See original GitHub issue

simple code like

import { h, render } from 'preact'
import { useState } from 'preact/hooks'

function Root(props) {
 const [ c, setC ] = useState(0) 
 return h('h1', { onClick:()=>setC(c+1) }, `counter is ${c}`)
) 

render(Root(), document.body)

fails with TypeError: Cannot read property '__H' of undefined due to undefined currentComponent within hooks

notice that currentComponent is set on pre-render phase, but in case of Root being functional hook must be initialized before any render.

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Comments:8 (4 by maintainers)

github_iconTop GitHub Comments

1reaction
mkrasuskicommented, Feb 18, 2020

Just noticed that many issues were similar to mine, but in other situations. Users had troubles with that and minified CDN versions of preact are little bit mysterious on that. Maybe some doc mentions on that would be also useful. Ok, thanks for your lightning fast and valuable support…and for great preact.

0reactions
JoviDeCroockcommented, Feb 18, 2020

No it can’t, do you have a use case where you would want to use a hook outside of render?

Do note that preact/debug warns you for these.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Invalid hook call. Hooks can only be called inside of the body ...
Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the...
Read more >
How To Fix The React Hook is Called in Function Error
The official React documentation says that a valid React function component is one that “accepts a single 'props' object argument with data and ......
Read more >
Technical Failure #1: React hooks dependencies
Let's imagine we have a root component with a state that changes frequently and a component connected to the backend.
Read more >
Rules of Hooks - React
Don't call Hooks inside loops, conditions, or nested functions. Instead, always use Hooks at the top level of your React function, before any...
Read more >
Invalid hook call. Hooks can only be called inside the body of ...
The error "Invalid hook call. Hooks can only be called inside the body of a function component" occurs for multiple reasons: Having a...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found