https://github.com/marvinhagemeister/preact-faq

Unofficial Preact FAQ
https://github.com/marvinhagemeister/preact-faq

Last synced: 16 days ago
JSON representation

Unofficial Preact FAQ

• Host: GitHub
• URL: https://github.com/marvinhagemeister/preact-faq
• Owner: marvinhagemeister
• Created: 2019-04-12T17:38:12.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2019-08-11T07:58:12.000Z (about 5 years ago)
• Last Synced: 2024-10-17T21:43:59.563Z (17 days ago)
• Size: 34.2 KB
• Stars: 39
• Watchers: 5
• Forks: 3
• Open Issues: 2
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Unofficial Preact FAQ

This is a list of common questions we frequently encounter in our [slack](https://preact-slack.now.sh/) channel.

## How do I upgrade to Preact X?

Check out [this guide](./migrate-to-x.md).

## I'm seeing weird `$$typeof` properties on all objects with Preact X

This happens because the internal shape for `vnodes` (the data structure we use to compare components)

has changed with Preact X. It is not a class anymore. The `$$typeof`-property is set by `preact-compat`

which sets it on the prototype of a Preact 8 `vnode`. Uninstall it via `npm uninstall preact-compat` and

switch to `preact/compat` which is included in the `preact` npm package.

## How do you work with async data in Preact?

Call the async function via `useEffect` and store the result inside the component's `state`.

That way the component will automatically rerender when the async request is resolved.

```jsx

function Foo() {

  const [data, setData] = useState(null);

  useEffect(() => {

    fetch("/my-api")

      .then(res => res.json())

      .then(res => setData(res));

  }, []);

  return data === null ? "not loaded" : data;

}

```