Brainscape's Knowledge GenomeTM

Browse over 1 million classes created by top students, professors, publishers, and experts.


See full index

Job Interview Question > React > Flashcards

React Flashcards

1
Q

Why does React need a “root” element?

A

-React is a framework that is fully made of JavaScript and no HTML. So it needs an html element where it can render out its own DOM tree and hook into

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
2
Q

Was ist JSX and is it HTML?

A

-No, that is a domain specific language that mimics HTML but sits on top of JavaScript. Babel etc will transfer JSX into JavaScript later on. The HTML page will be different then what is in JSX.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
3
Q

What is the difference between state and props?

A
  • In a state a component can store their internal state for example like a variable used within the component to toggle a modal. Or informations about a checkbox toggle whis is data that only the component itself must know not the whole application.
  • The props are beeing used when passing down information from a parent component to its child through prop drilling. That is the main way data is handled in React.
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
4
Q

What is context?

A

-Context is a global available prop that the whole application and every component can use, for example like translating texts. Often used only for specific usecases.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
5
Q

What are proptyped and what are the cons and pros?

A

-With proptypes you make a component know and enforce which data types it expects. You can determine what a component needs to work with it. But they can become a problem because often they are documented lazily or used with legacy calls like .objec tinstead of .shapeOf. So you also have to maintain a lot more code.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
6
Q

Which Lifecycle events are the most common one from your perspective?

A
  • ComponentWillMount
  • ComponentWillUpdate
  • ComponentWillReceiveProps when component is getting new state but is NOT rerendering
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
7
Q

When do you use a pure component, when do you use a class?

A
  • Pure componentes are used for optimizing performance

- Pure components have less overhead when you don’t need a state or lifecycle events

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
8
Q

Explain how the React rendering works in your terms!

A

-React listens for DOM updates and rerenders the DOM tree on every change but it performs way faster because it can determine if certain components states have changed. So it only needs to rerender parts of the Tree when they really have changed.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
9
Q

What is Redux?

A
  • Redux is a popular solution for storing state in React in a global manner.
  • Data is stored in an global object and actions can be used to make changes to it.
  • Components can be connected if needed to access the global application state.
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
10
Q

How does Redux work?

A

-You can use reducers that listens to actions and interact with a store/state. Then for actions there are action creators which can dispatch actions and transfer data in the redux store. React will rerender the dom with the changes to the state/store.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
11
Q

When do you use Redux?

A
  • When an application needs a global state which is shared between many components. Only the components needing that state are getting connected to Redux store.
  • When an application does not have a shared store you need no Redux.
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
12
Q

What is a container component?

A
  • Seperate JSX away from the logic of the component

- Only used when a component is doing more than showing stuff or passing data through

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
13
Q

What is a view component?

A
  • A component that only display passed through data to JSX

- A view component is seperated from the logic component but still often not resuable

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
14
Q

What components make for a good container candidate?

A
  • Container should be used on components that are more complex because the container adds complexity itself.
  • Adding a container to a small component will make it more complex than itself is
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
15
Q

What is a controlled component?

A

A controlled component takes it data through props and is controlled by parent components. It notifies changes on callbacks with onChange. It is a dumb component.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
16
Q

What is a uncontrolled component?

A

Stores state itself internally and the DOM is queried using the ref to find values like in HTML.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
17
Q

What is the virtual DOM?

A
  • A node tree containing elements used by React. The render() method creates the node tree from components and update the tree after actions/mutations.
  • The virtual DOM is diff compared against the previous DOM and only updates the DOM where it really changed
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
18
Q

Why use Redux?

A
  • Avoiding Prop drilling which can get messy
  • Having a global reachable data storage/state for the application
  • Often used for API call data or data that is needed int he whole applicaiton
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
19
Q

What happens when an action is called?

A

-Actions are contained in action creator methods
-When such a metod is invoked first the logic of the function will be sequentielly stepped though
-Then when condition are beeing triggered a dispatch can be triggered.
-This dispatch is registered by a reducer that listens to the action
-The reducer has contains conditional logic and a state to manipulate data or persist data coming from the action as a payload
The data is then available to connected components through props for all connected components

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
20
Q

What are benefits of React?

A
  • UI testing is easier
  • Faster Application with single page
  • JSX full JavaScript
  • Virtual DOM
  • Server Side and Client Side
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
21
Q

What is the single source of truth in Redux?

A
22
Q

What is the difference between stateless and statefull component?

A

-Stateful can store information and can pass data down
-Stateless component has no knowledge about past or future states
-

23
Q

How to write an even listener in React?

A 
class Event extends React.Conponent{{ 
    event(evt) {
     // logic of the event trigger
    },
    render(){
    return (
     div onClick={this.event}> Click me /div
    }
    }
})
24
Q

How to write a React component with creatElement?

A

const element = ( <h1></h1>

25
Q

What are Lifecycle methods? Name them in order

A

-Integral parts of React that have changes with versions of React
RENDER:
-constructor (runs only once thus this.state is allowed)
-render (no setting of state or you end in loop)
-componentDidMount (done rendering)

RERENDER:

  • render
  • componenteDidUpdate (done updating)

DYING
-componentWillUnmount (before component will die)

26
Q

Why do you need arrow functions in react class properties/methods?

A
  • Because a normal function within a function would have no access with this keyword to the class anymore
  • An arrow is different and looks up the this in the lexical scope so class
27
Q

How to prevent components from rerendering?

A

-shouldComponentUpdate() with false can be used to stop a rerender

28
Q

What is the best lifecycle method for making API calls?

A

-ComponentDidMount because you know the component is ready by then

29
Q

Which pattern does React use?

A
  • context-api (access props via context even higher in tree)

- render props (passing data to children)

30
Q

Why would you ever use React in a project?

A
  • Depending on the project just a static site wouldn’t need it
  • React is very function and JavaScript heavy
  • React is less opinionated than other Frameworks
31
Q

Why can’t you update state directly without setState()?

A
  • It triggers a rerender of the component

- First the state is copied, then modified, then setted

32
Q

How can you conditionally render in React?

A
  • if (something) { return ;
  • Something &&
  • something ? : null
33
Q

What are Fragments?

A
  • A Parent can only render a single Child
  • So you need a outermost container
  • Fragments are the most function empty containers
34
Q

What are alternative to Redux?

A
  • mobX
  • React Hooks
  • RxJS
35
Q

What is Redux middleware?

A
  • It does something in the middle before it happens

- For example intermediary before API calls and only proceed updating a component when the call was good

36
Q

What is redux-thunk?

A
  • Middleware for action creator methods to intermediate API calls to make sure syncronity works
  • Uses Promides with .then and .catch
37
Q

What is React?

A
  • Frontend JavaScript library
  • Developed by Facebook 2011
  • Resuable Components
38
Q

What are Downsides of React?

A
  • Not a full Framework, just a View

- Library is complex and large

39
Q

What is JSX?

A
  • A HTML-like language you can use in React
  • Easy to write HTML elements with it
  • Browser can’t read JSX, it gets translated by Babel to JavaScript before reaching Brwoser
  • Is never really real HTML and can behave differently
40
Q

What is different from Reac to Angular?

A
  • Only View not MVC like Angular
  • Virtual DOM not real DOM like Angular
  • Owned by Facebook not by Google like Angular
41
Q

Is eveything in React a compoinent?

A

Yes, they are stacked like lego and UI is spliited into container components with them in it

42
Q

Why is render so important in React?

A
  • Every component needs render()
  • Should be pure function
  • Containing only one Element/Fragment
43
Q

What are props in React?

A
  • Properties and the main way data is beeing passed through in React.
  • From Parent to Child Component prop drilled
44
Q

Was ist a state in React and how is it used?

A
  • Internal store of a single componente
  • For data that this compoment alone needs
  • accessed via this.state and setState()
  • Should be simple and rerenders on change
45
Q

What is the difference between state and props?

A
  • Prop doesn’t change inside a component

- state doesn’t get its value through the parent

46
Q

How to use arrow functions?

A

-Easier to work with higher order component
render() {
return () }

render() { return ( this.change(e)} />) }

47
Q

What is an event in React?

A
  • triggered by action like mouse over, mouse click

- similiar like HTML/JavaScript events

48
Q

What are refs in React?

A

-References on components as identifier

49
Q

How can you make components modular with React?

A

-By Chunking them and importing them into other components like lego

50
Q

What are higher order components?

A
  • Components container other components
  • Accept dynamicly child components
  • Don’t copy behaviour from input
  • Are Pure functions
51
Q

What can you do with a higher order component?

A
  • Reuse code alot

- Manipulate props

52
Q

What is a problem with Model View Controller Frameworks?

A

-DOM is expensive to change
-slow and memory waste
-

Job Interview Question (8 decks)

Brainscape helps you reach your goals faster, through stronger study habits.
© 2024 Bold Learning Solutions. Terms and Conditions