React 230327 Flashcards
What is React?
What is a React element?
a component (see what component is)
How do you mount a React element to the DOM?
this means to attach/insert a component into the dom tree
you mount by calling:
ReactDOM.render(foo, domContainer);
What is JSX?
a way to write html in react
How does React use JSX to render components?
What is a React component?
a JavaScript function that you can sprinkle with markup
How do you define a component in React?
In the return statement of a function whose name is capitalized, and which can be exported
How do you mount a component to the DOM (or “render” a component)?
What are props in React?
a way to pass info using what in html is like an attribute
How do you use props in a component?
How do you pass props to a component?
How do you write JavaScript expressions in JSX?
within curly braces
What are hooks in React?
a function starting with “use” then an uppercase letter,
e.g. useState
What are the “Rules of Hooks”? (if necessary, re-read the “Pitfall” box in State)
-declare at top
-don’t use inside conditionals/loops
-use “use”
-can only be called in react components and other hooks
What is the purpose of state in React?
it holds the data between function calls
Why can’t we just maintain state in a local variable?
because it would be reset when funcion calls
What two actions happen when you call a state setter function?
-triggers react to re-render
-it keeps a cashe of state value
When does the local state variable get updated with the new value?
on the re-render
How do controlled components differ from uncontrolled components?
if it’s controlled, the parent
if it’s uncontrolled, … ?
What are some advantages of using uncontrolled components?
don’t have to use state,
it’s simpler!
What are some advantages of using controlled components?
it’s simpler to get the values out
Which style do you prefer?
“it’s really just a preference”
What two props must you pass to an input for it to be “controlled”?
value and …
on change?
What are some popular npm packages for creating forms in React?
Where in the component code would a list of React components typically be built?
inside the function body
What Array method is commonly used to create a list of React components?
map()
Why do components in a list need to have unique keys?
when there are changes to list item content, you need to know which one to edit!
When is a component “mounted” to the DOM?
When the page renders (when the component appears for the first time) and if a dependency changes
What is a React Effect?
lets you synchronize a component with an external system. when dependencies (reactive values) change, code runs. if you don’t specify dependencies, all reactive values will be considered dependencies.
*double check this part (above)
when components and children are rendered, useEffect runs
When should you use an Effect and when should you not use an Effect?
If your Effect only adjusts some state based on other state, you might not need an Effect. In this case, try to use
When do Effects run?
when dependencies (reactive values) change, Effects runs. if you don’t specify dependencies, all reactive values will be considered dependencies.
What function is used to declare an Effect?
useEffect()
What are Effect dependencies and how do you declare them?
when these dependencies run, effects run. they are declared as the second argument
Why would you want to clean up from an Effect?
to release resources that have been allocated inside useEffect. that is, to stop wasting resources
How do you clean up from an Effect?
When does the cleanup function run?
when the compoment is dismounted, before the effect is called again
