React State Flashcards
What is state?
App data that may change over time.
How do you define environment variable when using create‑react‑app?
You prefix an environment variable with REACT_APP_YOUR_NAME, then create‑react‑app will replace that value with the associated environment variable.
For example, you could store a base URL for service calls in REACT_APP_BASE_URL
Are environment variables supported in React?
Yes, when using create-react-app support is built in for reading environment variables at runtime.
What are environment variables good for?
They are useful to store environment‑specific settings that don’t change at runtime. Environment variables aren’t specific to React. They’re supported on all operating systems, and they can be read during your app’s build process.
Storing state in URL - explain when and give examples
This is useful for tracking where the user is in the app, as well as their current settings. Keeping location‑related data in the URL means that your users can share deep links with others.
Examples: the current item being viewed, as well as filter, pagination, and sorting settings.
Storing state in the browser - explain when and give examples
This is useful when you want to persist state between reloads or even reboots. Web storage can include cookies, local storage, and IndexedDB.
Avoid storing sensitive data.
Examples: storing the user’s shopping cart or storing partially completed form data
Storing state as local component state - explain when and give examples
This is useful when one component needs the state. Common examples of local state include form data, component settings, and lists that are used by just one component.
Lifting the state to a common parent - explain when and give examples
Lifting state is a two‑step process. First, you declare the state in a common parent component, and then you pass the state down to child components via props.
This pattern is useful when a few related components need to use the same state. Lifting state avoids duplicating state in multiple components and thus helps assure that your components all consistently reflect the same state.
Deriving state - explain what it means and give examples
Derive state from existing state/props
Examples
- Call .length on an array in render
- Derive errorsExist by checking if the
errors array is empty.
Why derive?
- Avoids out of sync bugs
- Simplifies code
Handling state via refs - explain when and give examples
Refs can hold a DOM element reference. They are useful for managing uncontrolled components
Example: form inputs where React doesn’t control their value.
You can also use refs to store values that aren’t displayed.
Examples: tracking if a component is mounted, holding a timer, or any data that I want to keep between renders, such as the previous value that was held in state. This can be useful for features like undo and redo.
Storing state in context - explain when and give examples
This is useful If you have data and functions that are used by your entire app or by a significant portion of your app. Context avoids having to pass props down to every component that needs a given value, commonly called prop drilling.
Examples: logged‑in user, authorization settings, the selected theme, and internationalization settings.
Name 8 ways to handle state in React Apps
URL - Sharable app location
Web storage - Persist between sessions, one browser
Local state - Only one component needs the state
Lifted state - A few related components need the state
Derived state - State can be derived from existing state
Refs - DOM reference, state that isn’t rendered
Context - Global or subtree state
Third party library - Global state, Remote state
What are the most important rules of hooks?
First, hooks are for function components. They can’t be declared within class components.
Second, they must start with the word “use”.
Third, they can only be called at the top level. They can’t be called inside functions, conditionals, or loops because they must be declared in the same order for each render
