STATEFUL COMPONENTS
->These are also known as-Class-based or
Container or Smart components.
->These have a state object.
->These keepatrack of changing data via
the state object.
* When you need to manage data that changes over time (e.g., forms, counters, etc.).
import React, { useState } from "react";
const Counter = () => {
const [count, setCount] = useState(0);
return (
<div>
<p>Count: {count}</p>
<button onClick={() => setCount(count + 1)}>Increment</button>
</div>
);
};
export default Counter;
STATELESS COMPONENTS
-> These are also known as Function-based
or Presentational or Dumb components.
-> These do not haveastate object.
-> These print out what is given to them via
props,or they always render the same
thing.
* When you only need to render UI based on props or display static data.
const Greeting = (props) => {
return <h1>Hello, {props.name}!</h1>;
};
export default Greeting;