Introducing React Hooks 1 — Questions and Answers
Question 1: What exactly are Hooks?
- Javascript functions (Correct answer)
- Function components
- Class components
- Lifecycle methods
Correct answer: Javascript functions
React Hooks are essentially JavaScript functions that allow you to 'hook into' React state and lifecycle features directly from function components. They provide a way to manage state, perform side effects, and access context without needing to write class components. Examples include `useState`, `useEffect`, and `useContext`.
Question 2: Choose which is not an in-build hook.
- useState
- useRef
- useFetch (Correct answer)
- useEffect
Correct answer: useFetch
Among the options, `useState`, `useRef`, and `useEffect` are all built-in React Hooks provided by the React library. `useFetch` is not a standard built-in Hook; while it's a common pattern for data fetching and often implemented as a custom hook or found in third-party libraries, it is not part of the core React API.
Question 3: When do the states initialize in lifecycles?
- Mounting (Correct answer)
- Unmounting
- Updating
- All of the above
Correct answer: Mounting
In React's component lifecycle, states are initialized during the 'mounting' phase. This is the stage when a component is first created and inserted into the DOM. For instance, the `useState` hook initializes its state with the provided initial value only when the component first renders and mounts.
Question 4: Which won't force the component to re-render?
- Changes in props
- Changes in .current of useRef (Correct answer)
- Changes in dependency array of useEffect
- Changes in state
Correct answer: Changes in .current of useRef
Changes to the `.current` property of a `useRef` hook do not trigger a re-render of the component. `useRef` is primarily used to persist mutable values across renders or to access DOM elements directly without causing the component to update. Only changes to state, props, or the dependency array of `useEffect` (which can indirectly cause state changes) will force a component to re-render.
Question 5: ReactJS may be incorporated into any current web application.
- True (Correct answer)
- False
Correct answer: True
ReactJS is designed for incremental adoption, meaning it can be seamlessly integrated into existing web applications without requiring a complete rewrite. You can render React components within specific parts of an existing HTML page, allowing you to gradually introduce React functionality or use it for particular UI elements alongside other technologies.
Question 6: Which one in ReactJS is appropriate for inline style?
- None of the above
In ReactJS, inline styles are applied using a JavaScript object, where CSS properties are written in camelCase. For example, `style={{ backgroundColor: 'blue', fontSize: '14px' }}`. If the question implies other (unseen) options for inline styling were provided, and none matched this JavaScript object format, then 'None of the above' would be the correct choice, as this is the appropriate method.
Question 7: To create UI elements, ReactJS does not require HTML or any HTML preprocessors.
- True
- False (Correct answer)
Correct answer: False
ReactJS primarily uses JSX (JavaScript XML), which is a syntax extension that allows developers to write HTML-like code directly within JavaScript. While JSX is not raw HTML, it is a preprocessor that gets compiled into `React.createElement()` calls, effectively requiring an HTML-like structure to define UI elements. Therefore, it does require an understanding of HTML-like syntax and a JSX compiler.
What exactly are Hooks?