React Flashcards
Why did you choose React?
- Quick and easy setup with minimal code
- State makes program reactive, props make data flow easy
- Component based architecture- allows you to break complex UI into simple reusable components
- Virtual DOM makes for faster and more efficient apps
- JSX make it easy to include HTML
What are the major features of React?
- Speed, efficiency, flexibility
- JSX
- Virtual DOM
- Component-based architecture
- Declarative UI(as opposed to imperative-step by step)
State vs Props
- State is component data managed *within the component that *mutates, mostly from user events
- Similar to variables declared within a function
- Re-renders component on state change (makes application “reactive’)
- Props are component data/functions received from *above and are *immutable(on receiving end)
- Similar to function parameters (components configurations/options)
What is the virtual DOM? How does the virtual DOM work?
- Virtual representation of UI that is kept in memory and synced with the actual DOM by a library like React-Dom - process is called Reconciliation
- Enables declarative API of react
- Whenever a change is made in the application, the 2 are compared and only the components that have changed are updated. This makes for a more efficient application both speed wise and storage wise.
What is JSX?
“Syntactic sugar”
- Syntax extension to Javascript used with React to describe what UI should look like, produces React ‘elements’
- Allows you to write dynamic HTML in JS easily, very verbose in vanilla JS
-Babel is used to transpile JSX to JS so that browser can execute it
What does lifting state up mean and why do we do it?
- Lifting state up means updating state in a parent component based on an event triggered by a child component.
- We do this to create a single source of truth so multiple child components can have access to the same state variables that are managed in the parent component
Why do we set a key property when we map over an array in React?
- Keys provide a stable identity with a unique identifier when creating lists
- Used to identify which items have changed, or been added/removed enabling React to recycle existing DOM elements, thus providing a performance boost
How does React use closures?
-React uses closures in hooks such as useEffect to update state variables.
How do you send data up from child to parent component?
- Via callback functions passed down as props
- Call the function in the child component and pass the data as arguments
What are React Hooks?
- Hooks allow functional components to hook into react features like state and lifecycle methods
- useState: tracks state
- useEffect: perform side effects like fetch data or update DOM
- useContext: used to manage state globally
- useRef: track state changes or access DOM element without causing re-render
- useReducer: similar to useState but for complex logic
- useCallback: returns a memoized callback(optimization technique)
- useMemo: returns a memoized value
- custom hooks: reusable function like fetch
React Ref…
- Refs are variables that allow you to persist data between renders, but unlike state variables, updating refs does not cause a re-render.
- Commonly used to store reference to DOM elements.
Why do we use React Dev Tools?
- Good for debugging. Shows you component props/state/hooks
- Inspector shows React component tree that builds the page
- Profiler tab allows you to record an interaction
Common approaches for styling React…
- CSS classes
- Inline CSS
- Pre-processors(Sass, Stylus, Less)
- CSS-in-JS Modules(Styled-components, Emotion, Styled-jsx)
Performance optimization strategies for React…
- lazy loading is used to reduce the load time of your app
- useMemo is a React hook used for caching CPU-Expensive functions, allowing it to only be called when needed. useCallback can be used for similar result
What is the Strict Mode component used for?
Provides additional visibility of potential issues in components. Helps to find deprecated lifecycle methods and legacy patterns to ensure that React components follow current best practices.
