Q1. What is a functional component in React?
A functional component is a plain JavaScript function that accepts props as an argument and returns JSX. It is also known as a stateless component (before hooks). With React Hooks, functional components can now manage state and lifecycle features, making them the preferred way to write components.
Q2. How do you add state to a functional component?
You can add state using the useState hook. Import useState from React and call it inside the component: const [count, setCount] = useState(0). This returns a state variable and a function to update it. Example: function Counter() { const [count, setCount] = useState(0); return ; }.
Q3. What are the advantages of functional components over class components?
Functional components are simpler, easier to read, and have less boilerplate code. With hooks, they can do everything class components can. They avoid issues with 'this' binding and promote code reuse through custom hooks. Performance-wise, they are slightly lighter.
Q4. Can functional components have lifecycle methods?
Yes, using the useEffect hook, you can mimic lifecycle methods like componentDidMount, componentDidUpdate, and componentWillUnmount. For example, useEffect(() => { ... }, []) runs after the first render (like componentDidMount).
Q5. How do you pass props to a functional component?
Props are passed as attributes in JSX and are received as an object parameter. Example: . In the component, props.name gives "John". You can destructure props directly: function Welcome({ name }) { return