What are some examples of conditional rendering in React?

What are some examples of conditional rendering in React?

Conditional rendering in React allows you to render different UI elements based on certain conditions. For example, you can use the ternary operator to display a loading spinner while data is being fetched.

Can you give me a code example of that?

Sure! Here's a simple example:

function MyComponent() {
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    fetchData().then(() => setIsLoading(false));
  }, []);

  return (
    <div>
      {isLoading ? <Spinner /> : <DataDisplay />}
    </div>
  );
}

What other methods can I use for conditional rendering?

You can also use logical && operator, switch statements, or even separate components to handle conditional rendering in a more organized way.

Are there any performance considerations I should be aware of?

Yes, excessive conditional rendering can lead to performance issues. It's important to optimize your components and avoid unnecessary re-renders.