React Intermediate Cheatsheet Review (Hooks, Programming Patterns, React Styles, Forms)

Q: What are Hooks in React?

A: Functions that let you "hook into" React features like state and lifecycle in function components.

Q: What are some advantages of using Hooks?

- Reuse stateful logic between components

- Separate concerns in code

- Avoid "this" keyword confusion

- Eliminate need for class constructors or method binding

Q: What are the two rules for using Hooks in React?

1. Only call Hooks inside React function components

2. Only call Hooks at the top level (not inside loops, conditions, or nested functions)

Q: Why shouldn't you call hooks conditionally or inside loops?

A: It can lead to inconsistent order of hook calls, which breaks the rules React relies on to manage state.

Q: What is the purpose of the useEffect() hook? Give 2 examples.

A: To perform side effects in function components (e.g., fetching data, DOM manipulation).

Q: What is the syntax for useEffect()?

A: useEffect(callback, dependencyArray)

Q: When is the effect in useEffect(() => { ... }) run if no dependency array is given?

A: After every render.

Q: When is the effect run with an empty dependency array?

A: Only once, after the first render.

Q: When is the effect run with specific dependencies?

A: When any value in the dependency array changes.

Q: What is the purpose of returning a function from useEffect()? Give two examples of what this can look like.

A: It's used as a cleanup function to prevent memory leaks (e.g., removing event listeners, clearing intervals).

Q: Can you use useEffect() multiple times in a component? Why would you do this (give 2 reasons)

A: Yes. This helps to separate concerns and manage different dependencies.

Q: What does the useState() hook do? Where is this hook called?

A: It adds state to a function component. It should be called at the top level of a React function definition.

Describe the structure of the code when you use the useState() hook.

const [currentState, stateSetter] = useState(initialState);

We have an array with two elements:

The current state value

A setter function to update the state.

Then, initialState is an optional value that can be used to set the value of currentState for the first render.

Q: When should you pass a function to a state setter like setCount()?

A: When the new state depends on the previous state.

Q: When is it okay to pass a value directly to the state setter?

A: When the new state does not depend on the previous one.

Q: Can useState() be used multiple times in one component? Give two reasons why or why not.

A: Yes. It allows for better organization and separation of different pieces of state.

What are side effects in React? (Give 3 examples)

A side effect in React is anything that affects something outside the scope of the current function/component rendering itself, such as:

- Fetching data from an API

- Manipulating the DOM directly

- Setting a timer

When the effect returns a cleanup function, when does it call this cleanup function?

The Effect Hook will call the cleanup function before calling the effect again as well as when the component is being removed from the DOM.

Q: What is a stateful component in React?

A: A component that manages and holds its own state using hooks like useState().

Q: What is a stateless component in React?

A: A component that does not manage its own state and usually relies on props passed from a parent.

Q: Can stateful or stateless components use props?

A: Yes, both stateful and stateless components can accept and use props.

Q: What is a common pattern for sharing state in React?

A: A stateful parent component passes state down to stateless child components via props.

Q: Can a React component change its own props?

No. Props are read-only and should be updated by the parent component.

Q: Can a React component update its own state?

A: Yes. A component can freely update its own state using the state setter function (e.g., setState, useState).

Can you call setState() with no argument and give example of what happens if you do.

No, you cannot just call setState() (or the setter function from useState) without providing a new value or an updater function as an argument.

E.g. Simply calling setCount() will set the state to undefined.

Q: Can a parent component pass a state-changing function to a child?

A: Yes. The function can be passed as a prop, allowing the child to trigger state updates in the parent.

Q: What happens when a state update function is called in a child component?

A: The parent re-renders, and the new state is passed down again as props.

Q: How are event handlers used with state in React?

A: Event handlers (e.g., onChange, onClick) receive an event object, which is often used to update component state.

Q: How do you access the value from an input field in a change handler?

A: Use event.target.value.

Example:

const [text, setText] = useState('');
const handleChange = (event) => {
setText(event.target.value);
};

Q: What is a container component in React? (List 3 aspects of it.)

A component that contains business logic, handles state, and passes data/behavior to presentational components.

Q: What is a presentational component?

A: A component focused on UI rendering, receiving data and behavior via props.

Q: Why use container and presentational component patterns? (Give 2 reasons)

A: It separates concerns and improves code maintainability.

Q: How do you apply inline styles to an element in React? Give an example.

A: By using the style prop and passing a JavaScript object.

Example:

const color = {
color: 'blue',
background: 'sky'
};
<h1 style={color}>Hello</h1>

Q: How can you apply inline styles directly without defining an object first? Give an example.

A: By passing an object inline to the style prop.

E.g.

<h1 style={{ color: 'red' }}>I am red!</h1>

Q: How are CSS property names written in React style objects?

A: In camelCase instead of kebab-case.

Example:CSS: font-size → React: fontSize

Q: How are style values written in React?

A: Mostly as strings, but numeric values are interpreted as pixels (px) by default.

E.g. fontSize: 20 is interpreted as '20px'

Q: What is an uncontrolled form field in React? Give example.

A: A form field that maintains its own state internally without being managed by React.

E.g.

const uncontrolledInput = <input />;

Q: What is a controlled form field in React? Give example.

A: A form field whose value is controlled by React state and updated via an onChange handler.

Example:

const controlledInput = (
<input value={stateValue} onChange={handleInputChange} />
);

Q: Which type of form field is generally preferred in React?

A: Controlled form fields are preferred because they allow React to manage the form state explicitly.

Q: What defines a controlled component in React?

A: A component where form inputs have their values bound to state and are updated via event handlers.

Q: What two props are essential for a controlled input field in React?

A: The value prop (bound to state) and the onChange handler (to update state).

Example:

<input value={stateValue} onChange={handleInputChange} />