Custom components in React Native - Deep Dive

Overview - Custom components

What is it?

Custom components are reusable building blocks you create in React Native to organize and simplify your app's user interface. Instead of writing the same UI code many times, you write it once as a component and use it wherever needed. This helps keep your code clean and easier to manage. Custom components can include buttons, cards, lists, or any UI piece you want to reuse.

Why it matters

Without custom components, you would repeat the same code over and over, making your app harder to update and more prone to mistakes. Custom components save time and reduce errors by letting you change one place to update many parts of your app. They also help teams work together by dividing the app into clear, manageable pieces.

Where it fits

Before learning custom components, you should understand basic React Native elements like View, Text, and how to write simple functional components. After mastering custom components, you can learn about component state, props, and advanced patterns like hooks and context to build dynamic apps.

Mental Model

Core Idea

A custom component is like a reusable recipe card that you write once and use many times to make consistent dishes in your app.

Think of it like...

Imagine you have a favorite sandwich recipe. Instead of explaining it every time you want a sandwich, you write it down on a card. Whenever you want a sandwich, you just follow the card. Custom components work the same way for UI pieces in your app.

┌───────────────┐
│ CustomComponent│
├───────────────┤
│ - Props       │
│ - UI Layout   │
│ - Behavior    │
└──────┬────────┘
       │
       ▼
┌───────────────┐
│ App Screen 1  │
│ uses CustomComponent │
└───────────────┘

┌───────────────┐
│ App Screen 2  │
│ uses CustomComponent │
└───────────────┘

Build-Up - 7 Steps

1

Foundation

What is a React Native component

Concept: Learn what a component is and how React Native uses them to build UI.

In React Native, a component is a piece of UI you can use in your app. Basic components like View and Text come built-in. You can write your own components as functions that return UI elements. For example: function Hello() { return Hello!; } This component shows the word 'Hello!' on the screen.

Result

You see the text 'Hello!' displayed in your app.

Understanding components as the building blocks of UI helps you think in pieces, making complex apps easier to build.

2

Foundation

Creating your first custom component

Concept: How to write a simple custom component and use it in your app.

You can create a custom component by writing a function that returns UI. For example: function Greeting() { return Welcome to my app!; } Then use it inside another component: function App() { return ( ); } This shows the greeting text inside the app.

Result

The app displays 'Welcome to my app!' using your custom Greeting component.

Writing custom components lets you reuse UI pieces and keeps your code organized.

3

Intermediate

Using props to customize components

🤔Before reading on: do you think props let you change a component's look or text from outside? Commit to yes or no.

Concept: Props are inputs you give to components to customize them without changing their code.

Props are like parameters you pass to a component. For example: function Greeting(props) { return Hello, {props.name}!; } Use it like this: This shows 'Hello, Alice!'. You can reuse Greeting with different names.

Result

The app shows personalized greetings like 'Hello, Alice!' or 'Hello, Bob!' depending on the prop.

Props make components flexible and reusable by letting you change their content or style from outside.

4

Intermediate

Composing components for complex UI

🤔Before reading on: do you think components can contain other components inside? Commit to yes or no.

Concept: Components can be combined inside each other to build complex interfaces from simple parts.

You can put components inside other components. For example: function Card(props) { return ( {props.children} ); } function App() { return ( This is inside a card. ); } This shows text inside a styled box.

Result

The app displays a box with the text inside, showing how components nest.

Composing components lets you build complex UI by combining simple, reusable pieces.

5

Intermediate

Styling custom components

Concept: Learn how to add styles to your custom components to control their appearance.

You can add styles using the style prop or StyleSheet. For example: function Button(props) { return ( {props.title} ); } This creates a blue button with white text.

Result

The app shows a blue button with the text from the title prop.

Styling inside components helps keep UI consistent and makes components look good everywhere.

6

Advanced

Handling events in custom components

🤔Before reading on: do you think components can respond to taps or clicks? Commit to yes or no.

Concept: Custom components can handle user actions like taps by accepting event handler props.

You can pass functions as props to handle events. For example: function MyButton(props) { return ( {props.label} ); } Use it like: alert('Pressed!')} /> This shows a button that shows an alert when tapped.

Result

Tapping the button triggers the alert 'Pressed!'.

Handling events inside components makes them interactive and reusable with different behaviors.

7

Expert

Optimizing custom components with memoization

🤔Before reading on: do you think React Native re-renders components even if their props don't change? Commit to yes or no.

Concept: Memoization prevents unnecessary re-rendering of components when their inputs stay the same, improving performance.

React Native re-renders components by default when parents update. You can wrap a component with React.memo to skip re-render if props are unchanged: const Greeting = React.memo(function Greeting({name}) { console.log('Rendering', name); return Hello, {name}!; }); This avoids extra work and speeds up your app.

Result

The component only re-renders when the name prop changes, reducing slowdowns.

Knowing how to optimize rendering helps build smooth, fast apps especially with many components.

Under the Hood

React Native components are JavaScript functions or classes that return descriptions of UI elements. These descriptions are called React elements. The React Native framework takes these elements and translates them into native UI widgets on iOS and Android. When props or state change, React compares the new elements with the old ones (called reconciliation) and updates only what changed on the screen.

Why designed this way?

React Native was designed to let developers write UI in JavaScript while still using native controls for performance and look. Components as functions returning UI descriptions make code simple and declarative. This design separates UI logic from platform details and allows efficient updates through reconciliation.

┌───────────────┐
│ CustomComponent│
│ (JS function) │
└──────┬────────┘
       │ returns
       ▼
┌───────────────┐
│ React Element │
│ (UI description)│
└──────┬────────┘
       │ translated by React Native
       ▼
┌───────────────┐
│ Native Widget │
│ (iOS/Android) │
└───────────────┘

Myth Busters - 4 Common Misconceptions

Quick: do you think custom components automatically share state between each other? Commit to yes or no.

Common Belief: Custom components share their data automatically because they are reused.

Reality: Each instance of a custom component has its own state and props. They do not share data unless explicitly connected.

Why it matters: Assuming shared state causes bugs where changes in one component don't affect others as expected.

Quick: do you think you must always write class components to create custom components? Commit to yes or no.

Common Belief: Custom components must be class-based to have features like state and lifecycle.

Reality: Functional components with hooks are the modern, preferred way to write custom components with state and lifecycle.

Why it matters: Using outdated class components leads to more complex code and misses benefits of hooks.

Quick: do you think styling a custom component inside always overrides styles passed from outside? Commit to yes or no.

Common Belief: Styles inside a component always replace styles given by the parent.

Reality: Styles can be combined or overridden depending on how the component applies them, so careful design is needed.

Why it matters: Misunderstanding style precedence causes UI bugs and inconsistent appearance.

Quick: do you think React.memo always improves performance? Commit to yes or no.

Common Belief: Wrapping every component with React.memo makes the app faster.

Reality: React.memo adds overhead and only helps if props rarely change; overusing it can hurt performance.

Why it matters: Blindly using memoization can make apps slower and harder to debug.

Expert Zone

1

Custom components can accept children props to allow flexible content insertion, enabling powerful composition patterns.

2

Using prop types or TypeScript interfaces for custom components improves code safety and developer experience.

3

Memoization and useCallback hooks must be used carefully together to avoid unnecessary re-renders or stale closures.

When NOT to use

Avoid creating custom components for very simple UI pieces used only once, as it adds unnecessary complexity. Instead, write inline JSX. For highly dynamic UI, consider using hooks and context for state management rather than passing many props.

Production Patterns

In production apps, custom components are organized into folders by feature or UI type. Common patterns include container components for logic and presentational components for UI, and using design systems with shared styled components for consistency.

Connections

Functions in programming

Custom components are functions that return UI elements, similar to how functions return values.

Understanding components as functions helps grasp how inputs (props) produce outputs (UI), reinforcing functional programming ideas.

Modular design in engineering

Custom components break down UI into modules, like parts in a machine designed to fit and work together.

Seeing components as modules helps appreciate maintainability and reuse, key in both software and hardware design.

Lego building blocks

Components connect like Lego pieces to build complex structures from simple parts.

This connection shows how small, well-designed pieces can create large, flexible systems.

Common Pitfalls

#1 Passing incorrect prop types causing runtime errors

Wrong approach:

function Greeting(props) {
return Hello, {props.name.toUpperCase()}!;
}

Correct approach:

function Greeting(props) {
return Hello, {props.name.toUpperCase()}!;
}

Root cause:

Not validating or ensuring prop types leads to unexpected errors when props are used incorrectly.

#2 Forgetting to return JSX from a component

Wrong approach:

function Button() {
Click me;
}

Correct approach:

function Button() {
return Click me;
}

Root cause:

Missing the return keyword means the component returns undefined, so nothing renders.

#3 Mutating props inside a component

Wrong approach:

function Counter(props) {
props.count = props.count + 1;
return {props.count};
}

Correct approach:

function Counter({count}) {
const newCount = count + 1;
return {newCount};
}

Root cause:

Props are read-only; mutating them breaks React's data flow and causes bugs.

Key Takeaways

Custom components let you build reusable, organized pieces of UI that simplify app development.

Props are inputs that customize components, making them flexible and adaptable to different needs.

Composing components inside each other helps create complex interfaces from simple building blocks.

Handling events and styling inside components makes them interactive and visually consistent.

Optimizing rendering with memoization improves app performance but must be used wisely.