React & Frontend Development Flashcards
How do you manage state in a React application?
State in a React application can be managed using the useState hook for local component state, while the Context API provides a way to share state globally without prop drilling, making it suitable for simpler state management needs. For more complex applications where state must be shared across many components, Redux is commonly used, offering a centralized store and predictable state transitions, which is beneficial for maintaining application state in an organized manner. The choice between these approaches depends on the application’s size and complexity, and they can even be used together for optimal results.
How do you ensure responsive design in your frontend projects?
Responsive design can be ensured by using CSS frameworks like TailwindCSS or Bootstrap, which provide mobile-first design utilities. Additionally, I use media queries to apply different styles based on the device’s screen size, ensuring that the application adapts well to mobile, tablet, and desktop views.
How do you handle form validation in React?
For form validation, I use libraries like Formik or React Hook Form for easy integration with forms. Both libraries support custom validation rules and can integrate with validation schemas using libraries like Yup. These tools also help manage form state and provide feedback to the user.
What is the difference between client-side and server-side rendering?
Client-Side Rendering (CSR): The content is rendered on the client (browser), which means the browser downloads a JavaScript bundle, processes it, and displays the content dynamically. CSR provides faster transitions between pages but may have a slower initial load time.
Server-Side Rendering (SSR): The HTML is pre-rendered on the server, and the fully rendered page is sent to the client. SSR can improve initial page load times and SEO performance, as content is visible to web crawlers.
How do you handle data fetching and caching in a React application?
In a React application, data fetching can be efficiently handled using libraries like Axios or the Fetch API to make HTTP requests. Axios provides a straightforward API with built-in features like interceptors, while the Fetch API is a native browser method that offers more control over requests. For more advanced data management, especially in applications with complex data dependencies, I use Tanstack Query (formerly React Query). It simplifies the process of fetching, caching, and synchronizing server state in React applications. Tanstack Query automatically caches the fetched data, manages background updates, and allows for efficient refetching based on user interaction or predefined intervals, which significantly improves performance and user experience. The combination of these tools allows for a streamlined approach to managing asynchronous data while ensuring that the application remains responsive and efficient.
