Pull-to-refresh in React Native - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the React hook needed for pull-to-refresh.

React Native

import React, { [1] } from 'react';

Drag options to blanks, or click blank then click option'

AuseCallback

BuseEffect

CuseState

DuseRef

Attempts:

3 left

💡 Hint

Common Mistakes

Choosing useState or useEffect instead of useCallback.

The useCallback hook is used to memoize the refresh function for pull-to-refresh.

2fill in blank

medium

Complete the code to set the refreshing state variable.

React Native

const [refreshing, [1]] = React.useState(false);

Drag options to blanks, or click blank then click option'

AsetRefresh

BsetRefreshing

CrefreshSet

DrefreshingSet

Attempts:

3 left

💡 Hint

Common Mistakes

Using incorrect setter names like setRefresh or refreshingSet.

The setter function for the refreshing state is conventionally named setRefreshing.

3fill in blank

hard

Fix the error in the refresh function to correctly update the refreshing state.

React Native

const onRefresh = React.useCallback(() => {
  [1](true);
  setTimeout(() => [1](false), 2000);
}, []);

Drag options to blanks, or click blank then click option'

ArefreshSet

Brefreshing

CsetRefresh

DsetRefreshing

Attempts:

3 left

💡 Hint

Common Mistakes

Calling the state variable instead of the setter function.

The function setRefreshing must be called to update the refreshing state.

4fill in blank

hard

Fill both blanks to add pull-to-refresh to the FlatList component.

React Native

<FlatList
  data={data}
  renderItem={renderItem}
  keyExtractor={item => item.id}
  refreshing=[1]
  onRefresh=[2]
/>

Drag options to blanks, or click blank then click option'

Arefreshing

BonRefresh

ConRefresh()

Drefreshing()

Attempts:

3 left

💡 Hint

Common Mistakes

Using function calls instead of references for onRefresh.

Passing wrong prop names.

The refreshing prop takes the boolean state, and onRefresh takes the function to call on pull.

5fill in blank

hard

Fill all three blanks to complete the pull-to-refresh example with FlatList.

React Native

import React, { [1] } from 'react';
import { FlatList } from 'react-native';

export default function App() {
  const [refreshing, [2]] = React.useState(false);

  const onRefresh = React.useCallback(() => {
    [2](true);
    setTimeout(() => [2](false), 1500);
  }, []);

  return (
    <FlatList
      data={[{id: '1'}, {id: '2'}]}
      keyExtractor={item => item.id}
      renderItem={({item}) => <></>}
      refreshing={refreshing}
      onRefresh={onRefresh}
    />
  );
}

Drag options to blanks, or click blank then click option'

AuseCallback

BsetRefreshing

CuseState

DsetRefresh

Attempts:

3 left

💡 Hint

Common Mistakes

Confusing useState and useCallback imports.

Using wrong setter function names.

We import useCallback, use useState to create refreshing and setRefreshing, and call setRefreshing to update state.