12 React and React Native questions and answers - 1st post

This is a post from a series (next post here) where I will cover 12 react and react native common questions and answers every week until we reach 60 of them. After that goal I will be continuing to grow this list but from time to time. Useful links can be found in the answers. Corrections and suggestions are more than welcome.

1. What is the purpose of React?

   React is a JavaScript library for building user interfaces. It allows developers to create reusable UI components and efficiently update them when the underlying data changes.

2. What is React Native?

   React Native is a framework for building mobile applications using JavaScript and React. It enables developers to create native-like mobile apps for iOS, Android and other platforms from a single codebase.

3. Does react-native support web development?

   Yes, React Native has an additional framework called React Native for Web that allows you to build web applications using React Native concepts and components.

   One of the major advantages of using React Native for Web is code reusability. You can share a significant portion of your codebase between your React Native mobile app and your web app.

   However, it's important to note that while React Native for Web provides a high level of code sharing, not all React Native components and APIs are supported in the web environment.

4. What are the key features of React?

   • Component-Based Architecture: React follows a component-based architecture, which means that the user interface is built by creating individual components that encapsulate their own logic and UI.

   • Virtual DOM: React introduces a virtual representation of the DOM, a lightweight copy of the actual DOM kept in memory. When there are changes to the underlying data or state of a component, React efficiently updates only the necessary parts of the virtual DOM. It then compares the updated virtual DOM with the real DOM and applies only the minimal set of changes required, resulting in faster and more efficient rendering.

   • Unidirectional Data Flow: React follows a unidirectional data flow, also known as one-way binding. Data in a React application flows from parent components to child components through a hierarchical structure.

   • JSX (JavaScript XML): JSX is a syntax extension for JavaScript that allows developers to write HTML-like code within JavaScript. It combines the power of JavaScript and HTML, providing a more expressive and declarative way to define the structure and appearance of React components. JSX is transformed into regular JavaScript during the build process.

   • Reusability and Composability: React encourages the creation of reusable components. By breaking down the user interface into smaller, self-contained components, developers can reuse these components throughout the application, leading to cleaner code, increased productivity, and easier maintenance.

   • Efficient Updates with Reconciliation: React employs a reconciliation algorithm that efficiently updates the DOM. When there are changes to the component's state or props, React compares the previous and current virtual DOM representations to identify the minimal set of changes needed.

   • Developer Tools and Ecosystem: React has a thriving ecosystem with a wide range of tools, libraries, and community support. React Developer Tools, for example, is a browser extension that provides helpful features for inspecting and debugging React component hierarchies, monitoring component state changes, and analyzing performance.

5. What are props in React?

   In React, "props" is short for "properties," and it is a mechanism for passing data from a parent component to its child components. Props are used to provide information or configuration to components, allowing them to render dynamically based on the data they receive. Props are essentially immutable and are passed down the component tree.

6. How does React handle component state?

   React components can have their own internal state managed using the useState hook or stateful class components. State in React allows components to manage and update their internal data. It enables components to be dynamic and responsive to user interactions or changes in the application. By updating the state, React triggers a re-render of the component, reflecting the updated state values in the user interface.

7. What is the React component lifecycle?

   In React, component lifecycle refers to the series of phases or events that a component goes through from its creation to its removal from the DOM. Each phase provides specific hooks or methods that allow developers to perform certain actions at different points in a component's lifecycle.

   • Mounting Phase: The component is being created and inserted into the DOM for the first time, initializing state and setting up any necessary event handlers or API calls.

   • Updating Phase: The component is being re-rendered due to changes in props or state, allowing it to update its UI to reflect the new data or conditions.

   • Unmounting Phase: The component is being removed from the DOM, providing an opportunity to clean up any resources, event listeners, or subscriptions associated with the component before it is completely unmounted.

8. What are hooks in react?

   In React, hooks are functions that allow functional components to have state, lifecycle methods, and other features that were previously only available in class components. Hooks were introduced in React 16.8 and have become a popular way to write reusable and modular code.

   Some commonly used hooks include:

   • useState(): Manages state within a functional component.

   • useEffect(): Performs side effects in a functional component, such as data fetching or subscriptions.

   • useContext(): Accesses the value of a React context within a functional component.

   • useRef(): Provides a mutable reference object that persists across renders.

   • useReducer(): Manages state with a reducer function, similar to how Redux works.

   • useCallback(): Memoizes a function to prevent unnecessary re-renders.

   • useMemo(): Memoizes a value to optimize expensive calculations.

9. Can we create our own custom hooks in React? What are they for?

   Yes, in React, you can create your own custom hooks. Custom hooks are JavaScript functions that follow a specific naming convention: they start with the word "use" (e.g., useCustomHook). Custom hooks allow you to encapsulate reusable logic and stateful behaviour in a way that can be shared across multiple components.

   Custom hooks are useful for abstracting away complex logic or common patterns into a reusable function. They can help you organize and modularize your code by separating concerns and promoting code reuse.

10. What is Redux?

    Redux is a state management library for JavaScript applications, including React. It provides a predictable and centralized way to manage application state, making it easier to track changes, handle complex data flows, and maintain a consistent state across different components.

    In Redux, the application state is stored in a single JavaScript object called the "store". The store holds the complete state tree of your application, which can be accessed and updated using predefined patterns.

11. What is the difference between controlled and uncontrolled components in React?

    In a controlled component, the value of an input element is controlled by React's state. Changes to the value are handled by updating the state. In an uncontrolled component, the value is managed by the DOM itself and accessed via a reference. More details.

12. How do you perform testing in React?

    Testing in React can be done using tools like Jest and React Testing Library.

    Jest is a popular testing framework that integrates well with React. It allows writing unit and integration tests in React. React Testing Library provides a more user-centric approach to testing by simulating user actions and testing the visual output of components.

    Testing in React involves various approaches such as unit testing, integration testing, component testing, snapshot testing and end-to-end testing. Unit testing focuses on testing individual components and functions in isolation. Integration testing ensures components work together correctly. Component testing validates the functionality of individual components. Snapshot testing captures expected component output for comparison. End-to-end testing simulates real user interactions across the application. Combining these approaches helps ensure the functionality, behavior, and reliability of React applications.

Next post can be found here: 12 React and React Native questions and answers - 2nd post