ReactJS Preparation - Day 5
Partha Roy
What is React-Router?
React Router is a fully-featured client and server-side routing library for React, a
JavaScript library for building user interfaces. React Router runs anywhere
React runs; on the web, on the server with node.js, and on React Native.
Install
npm install react-router-dom@6
Hooks in ReactJS
Hooks are a new addition to React 16.8. They let you use state and other
React features without writing a class.
React 16.8.0 is the first release to support Hooks. When upgrading, don’t
forget to update all packages, including React DOM. React Native has
supported Hooks since the 0.59 release of React Native.
What is a Hook?
A Hook is a special function that lets you “hook into” React features. For
example, useState is a Hook that lets you add React state to function
components. We’ll learn other Hooks later.
Use of Hooks
When would I use a Hook? If you write a function component and realize you
need to add some state to it, previously you had to convert it to a class. Now
you can use a Hook inside the existing function component.
useState
It declares a “state variable”. Our variable is called count but we could call it
anything else, like a banana. This is a way to “preserve” some values between
the function calls — useState is a new way to use the exact same capabilities
that this. the state provides in a class. Normally, variables “disappear” when
the function exits but state variables are preserved by React.
What do we pass to useState as an argument?
The only argument to the useState() Hook is the initial state. Unlike with
classes, the state doesn’t have to be an object. We can keep a number or a
string if that’s all we need. In our example, we just want a number for how
many times the user clicked, so pass 0 as initial state for our variable. (If we
wanted to store two different values in state, we would call useState() twice.)
What does useState return?
It returns a pair of values: the current state and a function that updates it. This
is why we write const [count, setCount] = useState(). This is similar to
this.state.count and this.setState in a class, except you get them in a pair. If
you’re not familiar with the syntax we used, we’ll come back to it at the bottom
of this page.
useEffect
Sometimes, we want to run some additional code after React has updated the
DOM. Network requests, manual DOM mutations, and logging are common
examples of effects that don’t require cleanup. We say that because we can run
them and immediately forget about them.
What does useEffect do?
By using this Hook, you tell React that your component needs to do something
after render. React will remember the function you passed (we’ll refer to it as
our “effect”), and call it later after performing the DOM updates. To this effect,
we set the document title, but we could also perform data fetching or call some
other imperative API.
Why is useEffect called inside a component?
Placing useEffect inside the component lets us access the count state variable
(or any props) right from the effect. We don’t need a special API to read it —
it’s already in the function scope. Hooks embrace JavaScript closures and avoid
introducing React-specific APIs where JavaScript already provides a solution.
Does useEffect run after every render?
Yes! By default, it runs both after the first render and after every update. (We
will later talk about how to customize this.) Instead of thinking in terms of
“mounting” and “updating”, you might find it easier to think that effects
happen “after render”. React guarantees the DOM has been updated by the
time it runs the effects.
Refs
Refs provide a way to access DOM nodes or React elements created in the
render method. In the typical React dataflow, props are the only way that
parent components interact with their children.
To modify a child, you re-render it with new props. However, there are a few
cases where you need to imperatively modify a child outside of the typical
dataflow. The child to be modified could be an instance of a React
component, or it could be a DOM element. For both of these cases, React
provides an escape hatch.
When to Use Refs
There are a few good use cases for refs:
● Managing focus, text selection, or media playback.
● Triggering imperative animations.
● Integrating with third-party DOM libraries. Avoid
using refs for anything that can be done declaratively.
