6. Principios SOLID
Single Responsibility Principle
Every element should do exactly one thing
React: Presentation & Container components
function Users() {
const [users, setUsers] = useState([]);
useEffect(() => {
fetch("https://jsonplaceholder.typicode.com/users", { method: "GET" })
.then((response) => response.json())
.then(setUsers);
}, []);
return (
<section>
<h1>Users: </h1>
<ul>
{users.map((user) => (
<li>{user.username}</li>
))}
</ul>
</section>
);
}
Open/Close Principle
You should be able to add functionality to some module, without modifying its existing source code
React: división en componentes
function UsersContainer() {
const [users, setUsers] = useState([]);
useEffect(() => {
fetch("https://jsonplaceholder.typicode.com/users", { method: "GET" })
.then((response) => response.json())
.then(setUsers);
}, []);
return <Users users={users} />;
}
Substitution Principle (Liskov)
React: Las propiedades de los components representan su API
function Users({ users }) {
return (
<section>
<h1>Users: </h1>
<ul>
{users.map((user) => (
- <User user={user} />
+ <UserCard user={user} />
))}
</ul>
</section>
);
}
Interface Segregation Principle
React: Lista solo las propiedades necesarias (no dependas de propiedades que no necesitas)
-function UserCard({ user }) {
+function UserCard({ username, company, email }) {
Dependency Inversion Principle
React: Extracción a custom hooks
function useUsers() {
const [users, setUsers] = useState([]);
useEffect(() => {
let isSubscribed = true;
api.fetchUsers().then((users) => {
if (isSubscribed) {
setUsers(users);
}
});
const cleanUp = () => {
isSubscribed = false;
};
return cleanUp;
}, []);
return { users };
}
function UsersContainer() {
const { users } = useUsers();
return <Users users={users} />;
}
Last updated