React Flashcards
What is React?
a front end framework that makes reusable components
What is a React element?
a component essentially a custom written DOM element
How do you mount a React element to the DOM?
What is JSX?
a syntax extension for JavaScript that lets you write HTML-like markup inside a JavaScript file
How does React use JSX to render components?
What is a React component?
reusable UI elements for your app
How do you define a component in React?
function name starting with a capital letter
How do you mount a component to the DOM (or “render” a component) ?
attach it to the root does a function call and returns the html element
What are props in React?
data used to communicate from parent components to child components similar to attributes
How do you use props in a component?
pass prop as a parameter and in the code block destructure it and equal it to prop
How do you pass props to a component?
it looks similar to html and you can pass it in your jsx with curly braces or quotes. any JavaScript expression inside the curly braces
How do you write JavaScript expressions in JSX?
How do you pass an event handler to a React component?
you pass the event handling function into the component as one the the props and it gets called when the event happens
What is the naming convention for event handlers?
uses the word handle
What are some custom event handler props a component may wish to define?
What is the naming convention for custom event handler props?
What are hooks in React?
useState and any other function starting with “use”
What are the “Rules of Hooks”?
only available while React is rendering, have to be declared at the top, you have to use “use”, hooks all must be called, can’t be called in loops, conditions, or other nested functions. Can only be called in React components or nested hooks.
What is the purpose of state in React?
To hold data for you between renders or function calls
Why can’t we just maintain state in a local variable?
because the variable gets refreshed to its local state
What two actions happen when you call a ‘state setter’ function?
it triggers React to render again and
When does the local ‘state variable’ get updated with the new value?
on the re-render or the next time the useState is called
How do controlled components differ from uncontrolled components?
uncontrolled components takes care of its own states while controlled components
What are some advantages of using uncontrolled components?
you don’t have to maintain state and you can just grab the data
What are some advantages of using controlled components?
the UI and data are synced
Which style do you prefer?
What two props must you pass to an input for it to be “controlled”?
set value and onChange
What are some popular npm packages for creating forms in React?
React Hook Form, Formik, and React Final Form
When would we want to create a list of React components?
when you want a dynamic list of components and you would want a dynamic list when you are building your list based off of data
Why is it important for React components to be data-driven?
it adjusts and adapts to the data rather than hard coding everything
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?
Array.map()
Why do components in a list need to have unique keys?
key is necessary when the list is dynamic and the list grows or shrinks and so the key is there to help better find them
What is the best value to use as a “key” prop when rendering lists?
an ID
What are two ways React components can interact?
How can multiple React components share state?
What are the steps to “lift state up”?
When would you want to life state up?
When is a component “mounted” to the DOM?
when it appears on the screen for the first time
What is a React Effect?
a block of code that runs after all the components have rendered
When should you use an Effect and when should you not use an Effect?
When do Effects fun?
after the page renders and runs if its dependencies change
What function is used to declare an Effect?
useEffect
What are Effect dependencies and how do you declare them?
effect dependencies ar
Why would you want to clean up from an Effect?
to release resources that you have allocated
How do you clean up from an Effect?
return a
When does the cleanup function run?
when dismounted (gets removed) and before the Effect runs again
What is the purpose of React “context”?
get data from components that is a child
What values can be stored in context?
anything you want
How do you create context and make it available to the components?
createContext and need to import the function from React
How do you access the context values?
you export it
When would you use context? (in addition to the best answer: “rarely”)
anytime when you want to share data to a bunch of components
What is a React custom hook?
a hook that you write and it can call other hooks
When are custom hooks useful? When are they not required?
when you don’t want to duplicate code and they are not required when they are not calling other hooks
What is the syntax (or naming convention) for writing a custom hook?
starts with “use” followed by a uppercased word taking whatever parameters you want and returns whatever you want it to return
How do you call a custom hook?
must be top level and can’t be conditionally called
When do custom hooks execute?
when the components are rendered or when you call them
