Scribd
Upload
9 views4 pages

React Hooks - 2024

Uploaded by

rajatsingh209
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
9 views4 pages

React Hooks - 2024

Uploaded by

rajatsingh209
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 4

React Hooks – Function starting with the use keyword are

called hooks
The difference between normal functions and hooks is that
you can only call the hooks at the top level of your
component.

1. useRef
 Usage: useRef is a react hook that lets us in referencing a value
that is not needed for rendering. This help us to store a value
which is not required for visual display. Example: In a stopwatch
we need useState to show the change time but we also need an
interval id so that we can stop the interval on button press.

 Usage: It is used for manipulating the DOM with a ref.


Examples: Focussing a text input (see useRef example in react
documentation)

 Returns: useRef returns an object with a single property current.


 Parameters: useRef(inititalValue). InitialValue is the value we want
the current property of useRef object to initially have.
 We can mutate the ref.current property
 When we change the ref.current property react does not re
render. React is not aware of when you change it because a ref is a
plain JavaScript object.
 Changing a ref does not trigger a re-render. This means refs are
perfect for storing information that doesn’t affect the visual
output of your component.
 In useRef the change in the ref.current property do not re render
the component whereas in useState() on change in state the
component is re rendered.
2. useState

Q. What is a component in react?


-> A component is a piece of reusable UI that has its own logic and appearance.
A component can be as small as a button or as large as an entire page.
React components are JS functions that return markup.

Q. What does default mean in export default ComponentA?


-> Default keyword tells other files using your code that Component is the main
function in your file.
Q. what is JSX?
-> JSX allows us to write HTML like syntax directly within JavaScript.

Q. What are Fragments?


-> Every react component should return a single JSX element. To achieve this
we use Fragments which does it and does not add any extra node to the DOM.
-> Fragments are used to group multiple elements together.
-> When we are rendering a list of elements we need to use <Fragment> so
that we can use the key prop with it.

Q. What are props?


-> Props are Properties used to pass the data down the component tree.

Q. What is Lifting Up State?


-> To collect data from multiple children, or to have two child components
communicate with each other, declare the shared state in their parent
component instead. The parent component can pass that state back down to
the children via props. This keeps the child components in sync with each
other and with their parent.
Lifting state into a parent component is common when React components are
refactored.

Q. What are the features of State?


-> State is private to a component.

Q. When does the child component re-render and how to avoid its re
rendering?
-> By default, all child components re-render automatically when the state of a
parent component changes. This includes even the child components that
weren’t affected by the change. Although re-rendering is not by itself
noticeable to the user (you shouldn’t actively try to avoid it!), you might want
to skip re-rendering a part of the tree that clearly wasn’t affected by it for
performance reasons. Immutability makes it very cheap for components to
compare whether their data has changed or not.
To avoid the child components from re rendering React uses memo.

You might also like