Component, Pure Component, Forward Ref Component, Pure Forward Ref Component in React Native TypeScript
- Component: A component in React Native is a reusable and self-contained piece of UI that manages its own state and props. Components can be functional. They receive input data through props and return JSX elements to describe what should be rendered on the screen.
2. PureComponent: In React, PureComponent is a class-based component that is optimized for performance using shallow prop and state comparison. When a PureComponent is re-rendered, it will compare the previous and current props and state using a shallow comparison. If there are no changes, it will prevent re-rendering, thus avoiding unnecessary updates and improving performance. However, it's crucial to note that this optimization only works with simple data types or immutable data, as it relies on shallow comparisons.
3. Forward Ref Component: The forwardRef function is a React feature that allows you to pass a ref from a parent component to a child component. This is useful when you want to access a child component's DOM node or instance from its parent. It is commonly used with functional components. When you use forwardRef, the child component receives the ref as an additional argument in its functional component.
4. Pure Forward Ref Component: A “Pure Forward Ref Component” is a functional component that combines both the optimizations of a PureComponent and the ability to forward refs. It leverages the forwardRef function and implements shallow comparison for props and state updates to improve performance. By using this combination, you can create highly performant and ref-forwarding components in React (or React Native).
