Components & Props Interview Questions

React Native has two types of components: 1) Class Components - ES6 classes that extend React.Component and have lifecycle methods, state management, and render method. 2) Functional Components - JavaScript functions that accept props and return React elements, commonly used with hooks in modern React Native development.

Props (properties) are read-only components that are passed from a parent component to a child component. They are used to customize and configure components, allowing for component reusability and maintaining the one-way data flow architecture in React Native applications.

View is a container component that works like a div in web development, used for layouting and styling. Text is specifically designed for displaying text content and text-specific styling. Text components must be used to render any string content in React Native.

SafeAreaView is a component that automatically adds padding to accommodate notches, status bars, and other device-specific screen elements. It ensures content is displayed within the visible area of the device, particularly important for iOS devices with notches.

Touch events are handled using components like TouchableOpacity, TouchableHighlight, TouchableWithoutFeedback, and Pressable. These components provide visual feedback and handle various touch interactions like taps, long presses, and press in/out events.

FlatList is optimized for long lists of data, rendering items lazily and only what's visible on screen. ScrollView renders all its child components at once, making it suitable for a small number of items. FlatList provides better performance for long lists but requires more setup.

Data can be passed between components using props for parent-to-child communication, callback functions for child-to-parent communication, and context or state management solutions for components that aren't directly related.

The Image component is used to display images in React Native. It can handle both local and remote images, supports various image formats, provides loading and error states, and includes properties for resizing and styling images.

Style props are used to customize the appearance of components. They can be applied directly as props or through StyleSheet.create(). React Native uses a subset of CSS properties with camelCase naming convention and some platform-specific properties.

KeyboardAvoidingView is a component that adjusts its height or position based on the keyboard height to prevent the keyboard from overlapping with input fields. It's particularly useful for forms and input-heavy screens on iOS devices.

Component composition involves building larger components from smaller ones using props.children, render props, and higher-order components. This promotes code reuse, maintainability, and separation of concerns in the application architecture.

Refs provide a way to access DOM nodes or React elements directly. They should be used sparingly for cases like managing focus, text selection, animations, or integrating with third-party libraries. Refs should not be used for tasks that can be handled through props and state.

FlatList performance can be optimized by: 1) Using getItemLayout to avoid measurement of items, 2) Implementing windowSize and maxToRenderPerBatch, 3) Using removeClippedSubviews, 4) Implementing proper key extraction, and 5) Optimizing renderItem function with memo or PureComponent.

Controlled components have their state managed by React through props and callbacks (e.g., value and onChangeText). Uncontrolled components maintain their own internal state. Controlled components provide more predictable behavior but require more setup.

Modern React Native uses hooks like useEffect for lifecycle management. useEffect replaces componentDidMount, componentDidUpdate, and componentWillUnmount. The dependency array controls when effects run, and cleanup functions handle teardown.

PureComponent implements shouldComponentUpdate with a shallow prop and state comparison. It's used to optimize performance by preventing unnecessary renders when props or state haven't changed. Should be used for components with simple props/state structures.

Prop validation is handled using PropTypes or TypeScript. PropTypes provide runtime checking of prop types, while TypeScript offers compile-time type checking. Both help catch bugs early and improve code documentation.

HOCs are functions that take a component and return a new component with additional props or behavior. They're used for code reuse, adding functionality like authentication, logging, or data fetching. HOCs follow the principle of composition over inheritance.

Modal dialogs can be implemented using the Modal component or third-party libraries. Considerations include proper animation handling, backdrop press handling, accessibility, and platform-specific behaviors like hardware back button on Android.

Render props are a pattern where a component receives a function prop that returns React elements. Unlike HOCs, render props provide more flexibility in composing behavior and avoid naming collisions. They're useful for sharing stateful logic between components.

Custom native components require native code implementation (Java/Kotlin for Android, Objective-C/Swift for iOS) and JavaScript interface. This involves creating native view managers, implementing view properties, and handling events through the bridge.

Rerendering optimization involves: 1) Using React.memo for functional components, 2) Implementing shouldComponentUpdate for class components, 3) Proper key usage, 4) State structure optimization, 5) Callback memoization with useCallback, and 6) Value memoization with useMemo.

Virtualized list challenges include: 1) Memory management for large datasets, 2) Smooth scrolling performance, 3) Handling variable height items, 4) Implementing pull-to-refresh and infinite scroll, 5) Managing scroll position restoration, and 6) Platform-specific optimizations.

Complex gestures require the PanResponder system or gesture libraries. Implementation involves handling gesture recognition, touch responder negotiation, animation integration, and proper cleanup. Consider interaction with scrolling views and native gesture handlers.

Lazy loading strategies include: 1) React.lazy with Suspense, 2) Dynamic imports, 3) Route-based code splitting, 4) Component prefetching, and 5) Loading state management. Consider bundle size impact and user experience during loading.

Error boundaries are components that catch JavaScript errors in their child component tree. Implementation involves getDerivedStateFromError and componentDidCatch lifecycle methods, fallback UI rendering, and error reporting integration.

Accessibility implementation includes: 1) Proper use of accessibility props, 2) Semantic markup, 3) Focus management, 4) Screen reader support, 5) Color contrast, 6) Touch target sizing, and 7) Platform-specific accessibility guidelines.