What’s inside those React thingies?

React has these cool pieces called “components” that are like building blocks for a website. They have their own little worlds called “state” and “props” that help them do their thing.

What’s this React state all about?

React state is like a component’s memory. It keeps track of important info inside the component, kinda like the variables in a function.

When should you use props instead of state?

Props are for passing info to a component that doesn’t need to change. The component just shows the info in a cool way without messing with it.

When should you use state instead of props?

State is for when you need to do stuff with the info before showing it. It’s also good for keeping track of values just for that component.

Are props and state like, unchangeable?

Props shouldn’t be changed once they’re given to the component. But state? That’s totally changeable, like variables in a function that need to do some work before giving the final result.

What’s that thing called “conditional rendering” in React?

Conditional rendering in React is like a magic trick, showing or hiding stuff based on certain conditions. Pretty cool, huh?

When do you use ‘&&’?

It’s like a secret code! The left side is the condition you want to check, and if it’s true, the right side gets displayed or does something cool.

When should you use a ternary?

A ternary is for when you’ve got two options to show. It’s like a choose-your-own-adventure book. But keep it simple with just two choices. If you need more, go for an ‘if…else’ or a ‘switch’ instead.

Just remember, you can use a ternary inside your function’s return, but ‘if…else’ has to live outside the return.

What’s a React side effect and can you give some examples?

Side effects in React are like secret missions that happen after a component is drawn on the screen. They don’t happen inside the render() method, but with a cool function called useEffect.

Examples: Think of things that impact your app from the outside: API calls, websockets, local storage, and syncing multiple states.

When does React run useEffect, and when does it NOT?

It runs on the first render and then again whenever the component gets a makeover. But first, it checks the dependency array.

What’s this dependency array thing?

It’s like a VIP list for the useEffect function. It’s an array of conditions, and useEffect only runs when those conditions change.

useEffect example:

// Grab useEffect from React
import { useEffect } from 'react';

function MyComponent() {
// Create a count state to use in the useEffect dependency array
const [count, setCount] = React.useState(0);

// Arguments: function and array
// Count is a dependency
useEffect(() => {}, [count]);
// useEffect runs when count isn't 0 anymore

// JSX component return
return ... }