APP DEV focus test

Component

A reusable piece of UI, written as a function that returns JSX

JSX

HTML-like syntax inside JavaScript that describes what to show on screen

Props

Data passed into a component from its parent (read only)

State

Data that lives inside a component and can change over time

Hook

A special function (starts with "use") that gives function components features like state and lifecycle

State variable

The first value from useState; holds the current value

Setter function

The second value from useState; updates the state and triggers a re-render

Re-render

React redrawing a component after its state or props change

Lifecycle

The stages of a component: mount (appears), update (changes), unmount (removed)

Mount

When a component first appears on screen

Side effect

Work outside of drawing the UI, like fetching data, timers, or listeners

useState

A hook that lets a component store a value that can change. Returns [state variable, setter function]

useEffect

A hook that runs side effects after a component renders, like fetching data

Dependency array

The second argument of useEffect that controls when it runs

Dependency array: none

useEffect runs after every render

Dependency array: []

useEffect runs once, when the component mounts

Dependency array: [value]

useEffect runs on mount and whenever value changes

Cleanup function

A function returned from useEffect that runs when the component unmounts

Conditional rendering

Showing different JSX depending on a condition, using an if statement, a ternary, or &&

Ternary operator

condition ? a : b returns a if true, b if false

Logical &&

condition && a returns a only if the condition is true

API

A service your app talks to for data, through requests and responses

Endpoint

A specific URL in an API for a specific resource (base URL + path)

HTTP method

The type of request: GET (get data), POST (send data), PUT (update), DELETE (remove)

fetch()

Built in function that makes a request to an endpoint and returns a promise

JSON

A text format for data, made of key: value pairs

res.json()

Turns the Response object from fetch into usable data; returns another promise

Asynchronous

Code that takes time to finish and doesn't block the rest of the app

Promise

An object representing the future result of an async task: pending, fulfilled, or rejected

.then()

Runs when a promise succeeds; receives its result

.catch()

Runs when any promise in the chain fails; handles the error

Promise chaining

Linking .then() calls so async steps run in order, each getting the previous result, with one .catch() at the end

Data binding

Connecting data (state or props) to the UI so the screen always reflects the current data

One way data binding

Data flows down from state and props to the UI; this is how React works

Controlled component

An input whose value comes from state and updates through a setter, like <TextInput value={text} onChangeText={setText} />

Destructuring

Pulling values out of an array or object into variables, like const [a, setA] = useState()