Aula 5 de React

Renderização condicional em React é o processo de decidir o que exibir na interface do usuário com base em certas condições.

Operador Ternário

        
const UserGreeting = ({ isLoggedIn }) => {
    return (
        <div>
            {isLoggedIn ? <h1>Welcome back!</h1> : <h1>Please log in.</h1>}
        </div>
    );
}

Short-circuit Evaluation (`&&`)

O Short-circuit Evaluation no JavaScript ocorre quando operadores lógicos, como && (E lógico), avaliam expressões e interrompem a execução assim que o resultado é conhecido. O operador && avalia os operandos da esquerda para a direita.

Ele retorna o primeiro valor falsy encontrado. Se todos os valores forem truthy, retorna o último valor avaliado. O operador interrompe a avaliação assim que encontra um valor que determina o resultado final. No caso do &&, se o primeiro valor for falsy, o restante não é avaliado.

&& é útil para verificar condições sem precisar usar estruturas como if. Ele é eficiente porque interrompe a execução assim que a condição é resolvida. Combinado com React, é uma maneira limpa de implementar renderização condicional.

        
const Notification = ({ showNotification }) => {
    return (
        <div>
            {showNotification && <p>You have new messages!</p>}
        </div>
    );
}

Função que Retorna JSX

        
const Greeting = ({ isLoggedIn }) => {
    const renderGreeting = () => {
        if (isLoggedIn) {
            return <h1>Welcome back!</h1>;
        }
        return <h1>Please sign in.</h1>;
    }
    return <div>{renderGreeting()}</div>;
}

Em React, os componentes re-renderizam quando há alterações no estado, nas props, ou em raros casos, forçando a atualização manualmente.

Alterações no State

        
const Counter = () => {
    const [count, setCount] = React.useState(0);

    return (
        <div>
            <p>Count: {count}</p>
            <button onClick={() => setCount(count + 1)}>Increment</button>
        </div>
    );
}

Alterações nas Props

        
 const Display = ({ message }) => {
    return <h1>{message}</h1>;
}

 const App = () => {
    const [text, setText] = React.useState('Hello');

    return (
        <div>
            <Display message={text} />
            <button onClick={() => setText('World')}>Change Message</button>
        </div>
    );
}

Force Update

        
const App() => {
    const [, forceUpdate] = React.useState(0);

    return (
        <div>
            <button onClick={() => forceUpdate(n => n + 1)}>Force Update</button>
        </div>
    );
}

Aula 5

React

Renderização Condicional e Re-renderização