React Js - Skill Assignment Quiz

Q1. If you want to import just the Component from the React library, what syntax do you use?

  • import React.Component from 'react'
  • import [ Component ] from 'react'
  • import Component from 'react'
  • import { Component } from 'react'

Q2. If a function component should always render the same way given the same props, what is a simple performance optimization available for it?

  • Wrap it in the React.memo higher-order component.
  • Implement the useReducer Hook.
  • Implement the useMemo Hook.
  • Implement the shouldComponentUpdate lifecycle method.

Q3. If you see the following import in a file, what is being used for state management in the component?

  • React Hooks
  • stateful components
  • math
  • class components

Q4. What is the testing library most often associated with React?

  • Mocha
  • Chai
  • Sinon
  • Jest

Q5. How do you handle passing through the component tree without having to pass props down manually at every level?

  • React Send
  • React Pinpoint
  • React Router
  • React Context

Q6. What is the name of the tool used to take JSX and turn it into createElement calls?

  • JSX Editor
  • ReactDOM
  • Browser Buddy
  • Babel

Q7. Why might you use useReducer over useState in a React component?

  • when you want to replace Redux
  • when you need to manage more complex state in an app
  • when you want to improve performance
  • when you want to break your production app

Q8. Which props from the props object is available to the component with the following syntax?

  • any that have not changed
  • all of them
  • child props
  • any that have changed

Q9. What can you use to handle code splitting?

  • React.memo
  • React.split
  • React.lazy
  • React.fallback

Q10. When do you use useLayoutEffect?

  • to optimize for all devices
  • to complete the update
  • to change the layout of the screen
  • when you need the browser to paint before the effect runs

Q11. When might you use React.PureComponent?

  • when you do not want your component to have props
  • when you have sibling components that need to be compared
  • when you want a default implementation of shouldComponentUpdate()
  • when you do not want your component to have state

Q12. Why is it important to avoid copying the values of props into a component's state where possible?

  • because you should never mutate state
  • because getDerivedStateFromProps() is an unsafe method to use
  • because you want to allow a component to update in response to changes in the props
  • because you want to allow data to flow back up to the parent

Q13. What is the children prop?

  • a property that adds child components to state
  • a special property that JSX creates on components that contain both an opening tag and a closing tag, referencing it's contents.
  • a property that lets you set an array as a property
  • a property that lets you pass data to child elements

Q14. Which attribute is React's replacement for using innerHTML in the browser DOM?

  • injectHTML
  • dangerouslySetInnerHTML
  • weirdSetInnerHTML
  • strangeHTML

Q15. Which of these terms commonly describe React applications?

  • error bosses
  • error catchers
  • error helpers
  • error boundaries

Q16. When using webpack, why would you need to use a loader?

  • to put together physical file folders
  • to preprocess files
  • to load external data
  • to load the website into everyone's phone

Q17. When using webpack, why would you need to use a loader?

  • virtual DOM
  • DOM
  • virtual elements
  • shadow DOM

Q18. To create a constant in JavaScript, which keyword do you use?

  • const
  • let
  • constant
  • var

Q19. What do you call a React component that catches JavaScript errors anywhere in the child component tree?

  • const
  • let
  • constant
  • var

Q20. In which lifecycle method do you make requests for data in a class component?

  • constructor
  • componentDidMount
  • componentWillReceiveProps
  • componentWillMount

Q21. React components are composed to create a user interface. How are components composed?

  • by putting them in the same file
  • by nesting components
  • with webpack
  • with code splitting

Q22. All React components must act like _ with respect to their props.

  • monads
  • pure functions
  • recursive functions
  • higher-order functions

Q23. What is sent to an Array.map() function?

  • a callback function that is called once for each element in the array
  • the name of another array to iterate over
  • the number of times you want to call the function
  • a string describing what the function should do

Q24. Why is it a good idea to pass a function to setState instead of an object?

  • It provides better encapsulation.
  • It makes sure that the object is not mutated.
  • It automatically updates a component.
  • setState is asynchronous and might result in out of sync values.

Q25. How do you set a default value for an uncontrolled form field?

  • Use the value property.
  • Use the defaultValue property.
  • Use the default property.
  • It assigns one automatically.

Q26. Which Hook could be used to update the document's title?

  • useEffect(function updateTitle() { document.title = name + ' ' + lastname; });
  • useEffect(() => { title = name + ' ' + lastname; });
  • useEffect(function updateTitle() { name + ' ' + lastname; });
  • useEffect(function updateTitle() { title = name + ' ' + lastname; });

Q27. Which function from React can you use to wrap Component imports to load them lazily?

  • fallback
  • split
  • lazy
  • memo

Q28. Which answer best describes a function component?

  • A function component is the same as a class component.
  • A function component accepts a single props object and returns a React element.
  • A function component is the only way to create a component.
  • A function component is required to create a React component.

Q29. Which library does the fetch() function come from?

  • FetchJS
  • ReactDOM
  • No library. fetch() is supported by most browsers.
  • React

Q30. Which choice will not cause a React component to rerender?

  • if the component calls this.setState(...)
  • the value of one of the component's props changes
  • if the component calls this.forceUpdate()
  • one of the component's siblings rerenders

Q31. Which choice will not cause a React component to rerender?

  • The link component allows the user to use the browser's Back button.
  • There is no difference--the Link component is just another name for the <a> tag.
  • The <a> tag will cause an error when used in React.
  • The <a> tag triggers a full page reload, while the Link component does not.

Q32. How would you generate the boilerplate code for a new app that you are building to collect underpants?

  • npm create-react-app collect-underpants
  • npx start-app collect-underpants
  • react new collect-underpants
  • npx create-react-app collect-underpants

Q33. React is an open-source project but is maintained by which company?

  • Intuit
  • Twitter
  • Facebook
  • Snapchat

Q34. What command can you use to generate a React project?

  • react-starter
  • create-react-app
  • react-gen
  • react-start

Q35. Which tool is not part of Create React App?

  • React
  • jQuery
  • webpack
  • ReactDOM

Q36. How might you check property types without using Flow or TypeScript?

  • Check Manually.
  • Use prop-helper.
  • use prop-types.
  • user checker-types.

Q37. What syntax do you use to create a component in React?

  • a generator
  • a function or a class
  • a service worker
  • a tag

Q38. What might you use webpack for in React development?

  • to fetch remote dependencies used by your app
  • to split your app into smaller chunks that can be more easily loaded by the browser
  • to format your code so that it is more readable
  • to ensure your app is not vulnerable to code injection

Q39. When using the React Developer Tools Chrome extension, what does it mean if the React icon is red?

  • You are using the development build of React.
  • You are using the production build of React.
  • You are using webpack.
  • You are using Create React App.

Q40. Why is ref used?

  • to bind function
  • to call function
  • to directly access DOM node
  • to refer to another JS file

Q41. Why is ref used?

  • to bind function
  • to call function
  • to directly access DOM node
  • to refer to another JS file

Q43. In react, the key should be?

  • Unique among his siblings
  • Unique in DOM
  • Does not requires to be unique
  • all of the above

Q44. Choose the library which is most often associated with react?

  • Chai
  • Sinon
  • Jest
  • Mocha

Q45. What of the following is used in React.js to increase performance?

  • Original DOM
  • Virtual DOM
  • Both of the above
  • None of the above

Q46. Among The following options, choose the one which helps react for keeping their data uni-directional?

  • DOM
  • flux
  • JSX
  • Props

READY TO GET STARTED?

Are you ready

Let’s Make Something Amazing Together

Get Started

Need help? Contact our experts
Tell us about your project