How do I use conditional rendering with hooks in React?

How do I use conditional rendering with hooks in React?

You can use conditional rendering in React with hooks by utilizing state to determine what to render. For example, you can use the useState hook to manage a boolean value that controls the rendering of different components.

Can you show me a simple code example?

Sure! Here's a basic example:

import React, { useState } from 'react';

function App() {
  const [isLoggedIn, setIsLoggedIn] = useState(false);

  return (
    <div>
      {isLoggedIn ? <h1>Welcome back!</h1> : <h1>Please log in.</h1>}
      <button onClick={() => setIsLoggedIn(!isLoggedIn)}>
        {isLoggedIn ? 'Log out' : 'Log in'}
      </button>
    </div>
  );
}

This code toggles between a welcome message and a login prompt based on the user's login state.

What if I want to render multiple components conditionally?

You can use multiple conditions with logical operators. For example:

{isLoggedIn ? <Dashboard /> : <Login />}
{isAdmin && <AdminPanel />}

This way, you can render different components based on various states.

Are there any performance considerations I should be aware of?

Yes, excessive conditional rendering can lead to performance issues. It's best to keep your components lightweight and avoid unnecessary re-renders by using React.memo or useMemo where appropriate.