Suspense: not yet implemented

[kvnwolf]

• Review the documentation: https://facebook.github.io/react-native
• Search for existing issues: https://github.com/facebook/react-native/issues
• Use the latest React Native release: https://github.com/facebook/react-native/releases

Environment

[skip envinfo]

{
 "private": true,
 "main": "./app-entry.js",
 "scripts": {
 "dev": "expo start",
 "prod": "expo start --no-dev"
 },
 "dependencies": {
 "expo": "^31.0.2",
 "react": "^16.7.0-alpha.2",
 "react-cache": "^2.0.0-alpha.1",
 "react-native": "https://github.com/expo/react-native/archive/sdk-31-with-hooks-dangerzone.tar.gz"
 },
 "devDependencies": {
 "babel-preset-expo": "^5.0.0",
 "expo-cli": "^2.6.12"
 }
}

Description

When trying to use Suspense on React Native, I am receiving a Not yet implemented issue, after the react-cache package has resolved the data.

Reproducible Demo

import React, { useState, ConcurrentMode, Suspense } from "react";
import { StyleSheet, SafeAreaView, Button, Text } from "react-native";
import { unstable_createResource as createResource } from "react-cache";

const myPokemon = createResource(function fetchPokemon(name) {
 const pokemonQuery = `
 query ($name: String) {
 pokemon(name: $name) {
 id
 number
 name
 }
 }
 `;

 return fetch("https://graphql-pokemon.now.sh", {
 method: "POST",
 headers: {
 "content-type": "application/json;charset=UTF-8"
 },
 body: JSON.stringify({
 query: pokemonQuery,
 variables: { name }
 })
 })
 .then(r => r.json())
 .then(response => response.data.pokemon);
});

function PokemonInfo({ pokemonName }) {
 const pokemon = myPokemon.read(pokemonName);
 console.log(pokemon);

 return <Text>{JSON.stringify(pokemon || "Unknown", null, 2)}</Text>;
}

export default function App() {
 const [pokemonName, setPokemonName] = useState(null);
 const [search, setSearch] = useState(false);

 return (
 <SafeAreaView style={styles.container}>
 <Button title="Get Pikachu" onPress={() => setPokemonName("Pikachu")} />
 {pokemonName ? (
 <Suspense fallback={<Text>loading...</Text>}>
 <PokemonInfo pokemonName={pokemonName} />
 </Suspense>
 ) : null}
 </SafeAreaView>
 );
}

const styles = StyleSheet.create({
 container: {
 backgroundColor: "#fff",
 flex: 1,
 margin: 20
 },
 textInput: {
 backgroundColor: "#eaeaea",
 borderColor: "#cccccc",
 borderWidth: 1,
 height: 40,
 padding: 10
 }
});

[react-native-bot]

Can you run react-native info and edit your issue to include these results under the Environment section?

If you believe this information is irrelevant to the reported issue, you may write [skip envinfo] under Environment to let us know.

[Taylor123]

Haven't used Suspense yet, but based off the docs it looks like you need to use it with React.lazy

https://reactjs.org/docs/react-api.html#reactsuspense

Today, lazy loading components is the only use case supported by <React.Suspense>

[kvnwolf]

@Taylor123 not necessary, you can use Suspense not to lazy load components, but for suspending rendering when for example, making a http request.

[m-alikhizar]

Yes, @Taylor123 we can use react suspense functionality without react.lazy as far as in the context of web. now trying to use in react-native to which i'm facing the same issue.

[Eyesonly88]

Any idea if this is on the roadmap / coming any time soon?

[stvkoch]

It's working in progress, I think that soon will be stable.

https://github.com/facebook/react-native/blob/d4ce8463a853a29cc977fcbf390b43940f521bd2/Libraries/Renderer/oss/ReactNativeRenderer-dev.js#L4319

Thank you React-Native Team!

[Harag]

I got the reproduceable demo above (minus the react-cache - did my own test cache) to work in 0.59.0-rc.3.

[stvkoch]

It's working in progress, I think that soon will be stable.

react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js

Line 4319 in d4ce846

function unhideInstance(instance, props) {
Thank you React-Native Team!

I'm using this implementation to test my apps, and so far I could go it's working well. I'm found some troubles with expo integration.

Note: 0.59-rc was shipped with support to hooks

[rickhanlonii]

This should be working in the latest release - if it's not please let us know and we can re-open