Component reuse

Learn to reuse components.

Component reuse

After defining a component, you can call it as many times as you want. By passing different props each time, you produce similar but different outputs. This is called reuse.

For example, <User name='Alex' /> and <User name='Ayşe' /> call the same User component with different names.

This way you avoid writing the same code again; a single definition gives you many uses.

The benefit of reuse

Reuse is a fundamental principle in software development. Instead of writing the same logic again, you define it once and use it in many places. This keeps code short, consistent, and easy to maintain.

When a bug is found, you fix it in only one place (the component definition); all calls are updated automatically.

This is why the component approach is the key tool that makes large apps manageable.

Exercise Two User calls

The App component should call <User /> twice inside a <View>: first with name='Alex', second with name='Ayşe'. Also define the User component with the name prop.

Show example solution

function User({ name }) {
  return (
    <Text>{name}</Text>
  );
}

function App() {
  return (
    <View>
      <User name='Alex' />
      <User name='Ayşe' />
    </View>
  );
}

Test yourself

Match the reuse

<User name='Alex' />

First call
<User name='Ayşe' />

Second call
same User

Single definition
different name

Different output

Second call

<View>
  <User name="Ayşe" />
  ____
</View>

Show answer

<View>
  <User name="Ayşe" />
  <User name="Alex" />
</View>

What does reuse provide?
- Longer code
- Slower execution
- More bugs
- Not writing the same code again
Show answer

Not writing the same code again — Reuse gives one definition, many uses.

Next lesson: Summary - Components

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies