React Flashcards
Do states persist when a component is re rendered?
Yes
What does it mean to “lift a state”?
Move a state to a parent component
When would it be practical to lift a state?
When a sibling component also needs access to that state.
Can props be passed from parent to child?
Yes
Can props be passed from child to parent?
No
Can props be passed from sibling to sibling?
No
How would you remove an item from an array stored in a state?
Use the filter function to create a new array that excludes the item
setItems((items) => items.filter(item => item.id !== id))
What is a controlled element?
An element that has it’s value defined by a state and also has an event handler which sets the state on change.
When would you need to use back ticks instead of quotations?
When you need to concat a variable and a string inside JSX {}
eg. <li className={pizza ${pizzaObject.soldOut ? "sold-out" : ""}}>
What is a derived state?
A normal variable that is using data from a state to calculate new data.
What is a children prop?
Children prop is the html content in between the opening and closing tag of a component. The component will receive this html as a prop called “children”.
What is a Structural component?
A component that contains other components and its purpose is to be the parent.
Examples would be pages, layouts, screens.
They can be large non reusable components but they don’t have to be.
What is a Stateless / Presentational component?
A component that has no state. It might receive and display props. It is usually small and reusable.
What is a Stateful component?
A component that has a state. Can be small and reusable.
What is prop drilling?
Passing a prop down to a component that is deeply nested. This means multiple components that don’t use the prop will need to receive it so they can pass it on to a child component until it reaches the component that will actually use the prop.
What is Component Composition?
Combining different components using the ‘children’ prop or explicitly defined props. This makes components more reusable because their content is not predefined.
What is a Component?
Description of a piece of UI
A component is a function that returns react elements (element tree), usually written as JSX
“Blueprint” or “Template”
What is a Component Instance?
Instances are created when we use components
It is a physical manifestation of a component
It is an individual copy of a component
Has its own state and props
Has a lifecycle
What is a React Element?
JSX is converted to React.createElement() calls
A React element is the result of these function calls
Information necessary to generate DOM elements which are the final visual representation of component instances rendered in the browser
Explain the uses and purposes of the “Key Prop”
?????????????
Event Bubbling
lecture 136-138
Thinking in react section 10
re do
UseEffect
A function that should be used to implement side effect code. UseEffect will only run when the component is first mounted or when one of it’s dependencies is updated.
What is a side-effect
An interaction between a React component and something outside the component.
CleanUp
A function that can be returned from a useEffect function.
Runs before the effect is executed again.
Runs after a component is unmounted.
do currency convertor l.158
Rules of hooks
Only call hooks at the top level (not inside conditionals, loops, nested functions etc)
Can only be called from React functions
useRef
Store a reference that will persist across renders.
A variable that persists across renders but is not suitable for useState.
Selecting and storing DOM elements.
Differences between useState and useRef
Updating ref does not trigger a re-render like state does.
A ref is mutable while state is immutable.
States update asynchronously while refs do not.
