Abdu's Garden

Reviewing React - a more structured approach

4 min read

Intro

This is a list of topics to visit when reviewing React.

What even is React?

React is a JavaScript library that’s used to build dynamic user interfaces for dynamic websites, and is used by several popular Web frameworks.

Single Page websites

Websites that are comprised of a single page whose elements get replaced according to the state and function… Think of a single HTML template, index.html, that’s gets components added to it and removed from it.

Components

Small modular parts of the UI that comprise the larger UI. Can be a function or a JS class. See Components and Component Life Cycle

Props

Values passed from parent components to child components, similar to how parameters work.

State

Representing the state of a specific “instance” of a component. This is where let [something, setSomething] = useState("initValueHere"); comes in.

State Management

Commands

  • npx create-react-app <appname> creates boiler plate for react application.
  • npm start: boots dev server
  • npm run build: builds the project and creates a build directory for production

Q&A

Amazing takeaways from u/Alexxx5754 here

”Why can’t we pass a promise to useEffect?”

Because React expects a simple callback, not a promise. React will insert the callback inside its own “scheduling mechanism” and execute it later. And new Promise/async () => ... returns a Promise object, not the expected callback.

”How can we cleanup data after component unmount?”

By returning a callback from useEffect and do the cleanup there.

”We are updating state, but the component does not re-render, why?“.

Check the useEffect dependencies… Check large nested objects inside useState, updating them might cause issues so if you must, then make sure you copy data at every object level.

“Basically, you need to do deep clone here (same as updating your Redux reducer data without Immer)."

"What will happen if we don’t pass dependency list to useEffect?”

Infinite loop of re-rendering…

”How can we optimize re-renders?”

By lifting the state up or putting it down the component tree, depends on the case.

“For example, input state should probably be put inside input component, not inside some big “container” component. This will cause the “container” component to re-render more than needed.”

  • useMemo can also helps sometimes. For example, If you compute some data inside your component, put it inside useMemo if your component lags.

If performance is fine, don't do this as useMemo can also impact performance if used prematurely and everywhere.

  • useCallback is useless 90% of the time, but can be useful when you define a function inside your functional component and want to pass that function as a prop to your other component. Otherwise, without useCallback the function will be recreated on each render, its reference will change and the component that you pass that function ref to will also re-render… However with useCallback the reference stays the same, so no re-rendering.
  • The memo() function can be used to wrap your whole component if you need more control over re-renders.
    • You can pass a function to memo() that receives new or old props and returns a boolean.
    • Also possible to use a function to compare the props manually and return a boolean, true to re-render and false otherwise…

”How can we preserve data between re-renders?“.

The answer is almost Always useRef.

”How can we cache data inside our component?”

Also useRef or useState.

”How can we reuse logic between component?”

By creating custom hooks.

What to ask the Interviewer?

  1. “What kind of data the API returns?”/“Can the API request throw an error?”
    1. “Should we process errors?”
    2. “What errors can we expect?”
    3. “What should we show when an error is received? What text/view?”
  2. “Should the component work on mobile/tablet or desktop only?”
  3. “What should we show during loading? Should we show anything at all?”

Alexxx5754's request advice: "If you need to make a simple request, just slap it inside your useEffect inside your component, don't create a custom hook. You can mention the custom hook approach later if asked."

Graph View