Components
78 bites tagged Components — interview questions with model answers, and 60-second explainers.
VirtualizedList: The Engine Behind React Native Lists
VirtualizedList is the engine behind React Native's efficient lists, rendering only visible items to save memory. Use it when FlatList isn't flexible enough, like for immutable data. The main footgun: component state is lost when items scroll out of view.
ScrollView: For Simple, Bounded Content
ScrollView is a container for a limited amount of scrollable content, rendering everything inside at once. Use it for short forms or articles where upfront loading is fine. The footgun: it's slow for long lists—use FlatList instead to avoid performance hits.
React Native's Text Component: Beyond Displaying Words
The React Native `<Text>` component creates a special text layout context, not a Flexbox one. Use it for all text, nesting components to style parts of a sentence.
React Native Core Components: Your UI Building Blocks
Think of Core Components as React Native's built-in LEGO bricks for UIs, translating your code into native Android and iOS views. Use them for layouts (`View`), text (`Text`), and lists (`FlatList`). The footgun: never use `ScrollView` for long lists.
Controlled vs. Uncontrolled Components
A controlled component is a puppet; its parent pulls the strings via props. An uncontrolled one manages its own state. This pattern is key for coordinating siblings, like ensuring only one panel in an accordion is open.
Component Variants: One Component, Many Forms
Component variants are like Lego bricks for your UI: one block can build many things. Instead of creating a unique component for every button state or size, you define properties to manage its variations.
Get Components bites daily.
Five a day, five minutes, offline. With quizzes so it sticks.
Open testing — you’ll join as an early tester.