Developing with React

Keys and Array Rendering

Often, we will render arrays of components such as by taking an array of review data, mapping each review to a component, and rendering that array of components. Whenever we render an array of components, React requires us to define a key property, otherwise it throws an error in the console.

Key

The key is a unique identifier for that component among the array. The key is responsible for matching states to a component. It does not have to be globally unique but it does need to be unique within that array. One might be tempted to use the index of the element as the key, however, this can cause some issues.

Indices are not unique to the component but rather its position. This might be fine if you are literally rendering a bunch of numbers such as search pagination numbers but in a case such as reviews or search results, this is not okay.

If the order of the components were to change such as if you were to sort reviews and display them in a order, their states would be mismatched due to setting the key to the index. The solution is to use a key that uniquely identifies the component. So for a review, you would use the review id.

BAD

{sortedReviews.map((review, index) => <SubReview review={review} key={index} course={props.course} professor={props.professor} colors={getU(review._id) as VoteColor} colorUpdater={updateVoteColors}/>)}

GOOD

{sortedReviews.map(review => <SubReview review={review} key={review._id} course={props.course} professor={props.professor} colors={getU(review._id) as VoteColor} colorUpdater={updateVoteColors}/>)}

Additional information can be found in React's documentation.

Hooks

React defines hooks as "Hooks let you use different React features from your components." (https://react.dev/reference/react). Hooks are used by calling their functions in your component.

This video is a good overview of hooks.

Our two most commonly used hooks are useState and useEffect.

useState

useState basically creates a variable that defines a state of the component. You use this when the variable will have some effect on how the component renders. Every time the state is changed, a component will re-render.

Examples on React docs.

useEffect

useEffect will call a function you give it when any of the variables listed in its dependency array are changed.

If leave the dependency array empty, useEffect will only call the function when the component is first mounted, i.e. when you first open the page. useEffect will always run once on mount if it has or doesn't have dependencies. Note that it runs after the first render. If you update any state in the useEffect, this will cause a second render immediately after the first.

If you do not provide a dependency array, useEffect will call the function every time the component is re-rendered. Majority of the time, we don't want to do this. It's extra unnecessary computation since a re-render can be triggered by something completely unrelated such as a parent component changing a state that has no relation to the current component.

Examples on React docs.

Additional important documentation you should read: you might not need an effect

What is redux?

Redux is a package that basically allows states to be shared across components... wip