Lecture Video will be posted here after lecture
React has changed a lot in the past few years since it was released in 2013,
innovation for React development is Hooks, released in 2019(!). While there
exist many Hooks in React (and you can even develop your own), we will be focusing
on two main Hooks in this class:
useEffect. You may read more about these other
(equally as important but more involved) Hooks here.
To put it simply, Hooks are functions for use in functional components, making them much more powerful.
You can only call Hooks from the top-level of functional components or your own custom hooks.
Previously, class components were primarily used for complex components in React which required their own states and needed to trigger their own side effects based on updated values in the component, and more. These functionalities were implemented through splitting a component into different parts of its lifecycle, which could easily become messy. The introduction of Hooks was a game changer, as it allows developers to do away with class-based components and their ugliness.
While Hooks are a new addition to React, their usage along with functional components have quickly become a dominant paradigm for React development, allowing for developers to reduce boilerplate (code required every time you make a certain feature) and make code much more understandable (we've seen how functional programming makes code both more concise and less bug-prone), without getting bogged down by confusing lifecycle methods.
We've shown the
useState Hook in previous lectures and you've had to use it
to keep track of state in A4 and A5. However, let's get deeper into understanding
it more generally and what you can do with it.
Let's consider a simple counter component requiring the use of states. We will outline the code in both the old class-based paradigm, and the new functional + Hooks paradigm.
Immediately, we notice that the functional component with Hooks method is much more concise and easier to understand (16 lines to just 11 lines of code). We were able to define the counter's default (starting) value of 0, its corresponding setter function, and variable to access the state in one line!
To generalize the syntax of the
useState Hook, the form is as shown below:
const [varname, setterFunc] = useState(initValue);
Note: states can be of any type.
We can also share Hooks across multiple components, allowing for even better reusability of code.
useEffect component allows use to trigger side effects in functional components.
It takes in a function (we can pass in ES6 arrow functions), which is called every
time after the component renders, which is to say every time one of the component's
states (in its
useState Hooks) change.
If we take the previous Counter example and want to change the title of the webpage every time the Counter rerenders,
useEffect also has a optional second parameter, which is an array of dependencies.
If any of these dependencies change (like state variables), the effect is run. For example,
if we want to update the title of our webpage when the Counter from the previous example
count state, we would use the following
useEffect Hook in the functional
useEffect - Subscribing to Outside Data and Separating Concerns#
Oftentimes when developing web applications, we use APIs to continually update
and serve data to the user. These can be our own homemade APIs through tools like
Express, or external APIs. In any case, it can be wasteful to constantly subscribe
to an API when the data isn't being rendered. In the second
useEffect call below,
assume we have a
ChatAPI object we can subscribe to and receive data from, or
unsubscribe to. We can return a function from a
useEffect call to be run
after it completes, and we pass it an arrow function that simply unsubscribes from the current API instance.
Also, even though we might be using the same hook for managing side effects of
different parts of a component, it's best practice to separate them into different
function calls, as seen with the two
useEffect functions below especially if your effects concern different things. Both of them will
still be run when the component re-renders (e.x. when any state of the component or parent component is changed).
Here, we have one call to
useEffect() for updating
document.title based on count
and another call for handling friend status.
While searching online for help / debugging, you will often run into StackOverflow answers or other resources for React dating back from a few years ago. Unfortunately, when it comes to developing with modern web technologies like React, some solutions often include deprecated features of React in the present day or need to be translated to the new paradigm (like Hooks). It is up to the developer to find the best solution that compromises between the bleeding-edge and practicality.
- Only call hooks from the top-level (not in loops, conditions, or nested functions).
- Ensures that hooks are called in the same order each time a component renders.
- Only call hooks from React functions (not regular JS functions).
- Can call from React functional components.
- Can call from your own custom hooks.
You've now had three weeks devoted to React, currently the most dominant frontend web framework in use for modern web applications. We've learned how to think about things from a component and state-based perspective, which has greatly helped us to modularize and reuse code effectively.
Here is a general thought-flow, from the perspective of a front-end engineer developing a React webapp from a design mock + API from the backend engineers:
- Break the UI into a component hierarchy. Each component should have a singular job, and should be reusable.
- Begin by building a static version of that component (not data-driven yet and not interactive), based on the JSON API provided by the backend.
- Identify minimal representation of the UI state. There’s going to be a lot of data floating around try to keep it only the components that need it by abiding to the DRY principle (DON'T REPEAT YOURSELF).
- Determine where the state should "live": should it be lifted up into a parent component as a common owner between multiple child components?
- Add inverse data flow - handle changes in the child component through a parent component
- Connect component to the backend (more on this in Lecture 8!)
This section contains the code from the live demo presented during class. Watch the lecture video linked at the top for an explanation of the code, intended to teach how to think in the React development paradigm.