22431888
Description
Flashcards by Jack Lovett-Earles, updated more than 1 year ago
|
Created by Jack Lovett-Earles
about 4 years ago
|
|
| Question | Answer |
| When to use a Class vs function | Use a class when component holds state or lifestyle method, otherwise use a function. |
| What is a Fragment | Can help simplify the dom tree without using loads of divs. However be careful as Flexbox and CSS rely on parent child relationships. |
| What are Default props | If a prop is missing or hasn’t been set. It won’t return null, it will revert to the default. |
| What are Prop Types | allow you to set types (like typescript) |
| what does this.props.children do? | this.props.children is used to display whatever you include between the opening and closing tags when invoking a component. |
| What is a Higher-order component | Is a component Takes in a component as an argument Returns a new component The component it returns can render the original component that was passed in (used to keep code dry) |
| what is Shallow comparison | Objects hold their own space in memory so even if their values are the same, when you use strict equals it will return false. However shallow comparison compares the top level values in both objects rather than the object memory reference. The same is true for arrays. |
| What does React Context API do? | Context provides a way to pass data through the component tree without having to pass props down manually at every level aka stops the need for prop drilling. |
| What is state | is an object that determines how that component renders & behaves. In other words, “state” is what allows you to create components that are dynamic and interactive. |
| How do you modify state? | setState() method allows us to modify state. |
| How do you set state? | this.state = {count:0} sets the initial state |
| If you need to remember the state before what do you pass to setState() | prevState eg this.setState((prevState) => { Return { count: prevState.count + 1 } }) |
| useState() Hook | const [array, function] = useState(initialState) Use state returns an array with a function in. On the left is array destructuring so you don't have to use the array index when wanting to render state. |
| name 3 Lifecycle methods | Mounting - Means putting elements into the DOM Updating - A component is updated whenever there is a change in the components state or props Unmounting - This is when a component is removed from the DOM |
| Conditional render with && | // if the first statement is true, return the second |
| What are props? | are like html attributes on an input. You can add a “placeholder” property which will add text, a “type” property which will change what kind of input it is. Props are how you pass read only data down from one component to another. |
| Why use an arrow function when handling events? | Using an arrow function to handle an event means you don't have to bind “this”. With regular functions the “this” keyword represents the object that called the method, which can be the global window object, a HTML button, or whatever. With arrow functions, “this” will always represent the object that defined the arrow function |
Want to create your own Flashcards for free with GoConqr? Learn more.