|
Question: What are the different ways to style components in React?
|
Answer: There are several ways to style components in React, like:
• Inline styles: Inline styles allow you to apply CSS directly to JSX elements using the style attribute.
• CSS modules: CSS modules allow you to write CSS files where class names are scoped locally to the component, preventing style conflicts.
• Styled-components: Styled-components is a popular library that allows you to write CSS-in-JS by defining styled components with tagged template literals.
• CSS frameworks: CSS frameworks like Bootstrap or Material-UI provide pre-built components and styles that can be easily integrated into React applications.
|
|
Question: What are React Hooks Rules?
|
Answer: React Hooks have rules that must be followed to ensure their correct usage:
• Hooks should only be called at the top level of functional components or custom hooks.
• Hooks should not be called inside loops, conditions, or nested functions.
• Hooks should have consistent order and naming conventions to maintain clarity and predictability.
• Custom hooks should start with the word "use" to indicate that they are hooks.
|
|
Question: What is server-side rendering (SSR) in React and what are its benefits?
|
Answer: in React, Server-side rendering (SSR) is the process of rendering React components on the
server and sending the generated HTML to the client. This allows the initial page load to contain fully rendered HTML,
improving performance and SEO.
SSR ensures that search engines can crawl and index the content, leading to better search engine rankings
and improved user experience, especially for content-heavy applications.
|
|
|
|
|
|
Question: What is the purpose of the 'useRef' hook in React?
|
Answer: The 'useRef' hook in React is used to create a mutable ref object whose .current property can
hold a reference to a DOM element or a value that persists across renders.
The useRef is often used to access or manipulate DOM elements imperatively, manage focus, or store values that don't trigger re-renders.
|
|
Question: Can you explain the concept of 'error boundaries' in React?
|
Answer: The 'error boundaries' are React components that catch JavaScript errors anywhere in their child component tree,
log those errors, and display a fallback UI instead of crashing the entire application.
They are useful for handling errors in production and providing a better user experience by gracefully recovering from errors.
Error boundaries are implemented using special lifecycle methods like 'componentDidCatch' in class components
or the ErrorBoundary component in functional components.
|
|
|
|
|
|
Question: What are the advantages of using 'functional components' over 'class components'?
|
Answer: Below please find some advantages of using functional components over class components:
• Easier to read and write with less boilerplate code.
• Improved performance due to the use of React hooks like useState and useEffect.
• Better support for code splitting and lazy loading with React Suspense and lazy loading features.
• Encourages the use of a more functional programming style, leading to cleaner and more maintainable code.
|