Page cover

6. Principios SOLID

Martin, Robert C. (2000). "Design Principles and Design Patterns"

Single Responsibility Principle

Every element should do exactly one thing

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

Composición >>> Herencia

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)

Cualquier objeto se tiene que poder sustituir por un objeto que sea un subconjunto

function Users({ users }) {
  return (
    <section>
      <h1>Users: </h1>
      <ul>
        {users.map((user) => (
-          <User user={user} />
+          <UserCard user={user} />
        ))}
      </ul>
    </section>
  );
}

Interface Segregation Principle

No fuerces cumplir interfaces que no se usen.

-function UserCard({ user }) {
+function UserCard({ username, company, email }) {

Dependency Inversion Principle

Interacciona con los detalles usando abstracciones

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