Refreshing Child Components in React Native

📅

loading..🐩🐩🐩🐩

Before getting started 🔗

This post uses an Expo environment, but the approach applies to all React Native environments.
It also assumes a project with the basic configuration already in place.

In Refreshing a screen in React Native, part 1↗, we implemented a refresh feature.

This post explains how to refresh the data in child components as well.

1. The role of keys in React and React Native 🔗

First, we need to understand an important concept:

keys

A key is a unique value that React uses to distinguish components and identify them during rendering.

Keys are most often used when rendering items from an array.

const items = [
  { id: 1, name: 'Item 1' },
  { id: 2, name: 'Item 2' },
  { id: 3, name: 'Item 3' },
];	
 
return (
  <div>
    {items.map((item) => (
      <div key={item.id}>{item.name}</div>
    ))}
  </div>
);

Without a key, the following warning appears.

Warning: Each child in a list should have a unique "key" prop.

I plan to explain keys in more detail in another post.

For now, remember that one role of a key is to

identify

a component when it is

rendered again

2. Rendering only the component you choose 🔗

We can use this concept to render only a selected component again.

The following example refreshes data in two otherwise identical child components.

Both use useState to display the current time when initially rendered.

/app/index.tsx

import React, { useState } from 'react';
import { Text, ScrollView, RefreshControl, View } from 'react-native';
 
const Card = () => {
  const [now] = useState(new Date().toLocaleString());
 
  return (
    <View style={{ flex: 1 }}>
      {Array.from({ length: 100 }).map((_, index) => (
        <Text key={index} style={{ textAlign: 'center', justifyContent: 'center', fontSize: 16 }}>{`${now}`}</Text>
      ))}
    </View>
  );
};
 
const List = () => {
  const [key, setKey] = useState(new Date().getTime());
  const [refreshing, setRefreshing] = useState(false);
 
  const handleRefresh = () => {
    setRefreshing(true);
    setTimeout(() => {
      setKey(new Date().getTime());
      setRefreshing(false);
    }, 1000);
  };
 
  return (
    <ScrollView
      style={{ flex: 1, backgroundColor: 'white', padding: 20 }}
      refreshControl={
        <RefreshControl refreshing={refreshing} onRefresh={handleRefresh} colors={['blue', 'red', 'green']} />
      }
    >
      <View style={{ flex: 1, flexDirection: 'row' }}>
        <Card key={key} /> {/* 키 값을 새로 설정 */}
        <Card /> 
      </View>
    </ScrollView>
  );
};
 
export default List;

The result shows that only the component on the left refreshes its time data.

Watch the seconds carefully

3. Rendering the component itself again 🔗

Next, let's render the component itself again.

This example does so by assigning a new key to the top-level component in the existing code.

Only one additional line is needed.

/app/index.tsx

import React, { useState } from 'react';
import { Text, ScrollView, RefreshControl, View } from 'react-native';
 
const Card = () => {
  const [now] = useState(new Date().toLocaleString());
 
  return (
    <View style={{ flex: 1 }}>
      {Array.from({ length: 100 }).map((_, index) => (
        <Text key={index} style={{ textAlign: 'center', justifyContent: 'center', fontSize: 16 }}>{`${now}`}</Text>
      ))}
    </View>
  );
};
 
const List = () => {
  const [key, setKey] = useState(new Date().getTime());
  const [refreshing, setRefreshing] = useState(false);
 
  const handleRefresh = () => {
    setRefreshing(true);
    setTimeout(() => {
      setKey(new Date().getTime());
      setRefreshing(false);
    }, 1000);
  };
 
  return (
    <ScrollView
      key={key} // 키 값을 새로 설정
      style={{ flex: 1, backgroundColor: 'white', padding: 20 }}
      refreshControl={
        <RefreshControl refreshing={refreshing} onRefresh={handleRefresh} colors={['blue', 'red', 'green']} />
      }
    >
      <View style={{ flex: 1, flexDirection: 'row' }}>
        <Card key={key} />
        <Card />
      </View>
    </ScrollView>
  );
};
 
export default List;

The result shows that every component is rendered again, regardless of the child components' keys.

Watch the seconds carefully

Conclusion 🔗

We have explored how to refresh all the way down to child components in React Native.

This technique also lets you refresh just the components you choose.

Combining different approaches can make data refreshing more flexible.

Further questions 🔗

Why should you avoid setting a key to an array index?
What are the advantages and disadvantages of rendering the entire component again?

References 🔗

React official documentation — Rendering Lists↗

Refreshing Child Components in React Native | PromleeBlog