Assignment 6 - Performance & Maintainability

First, complete at least assignment 4 if you haven't already. That assignment is prerequisite; it would be a poor use of time to learn about performance and code maintainability if you aren't already familiar with React.

In workshop 6, we learned about how to optimize the performance of your React app using new hooks, functions, and tricks with array states. We also learned how to build readable, maintainable codebases.

In assignment 6, you’ll refactor your code to improve its maintainability and deploy some tricks to optimize its performance.

Setup

  1. You’ll begin with your web app from assignment 5. If you did not do assignment 5, start with your web app from assignment 4. If you didn't do that either, go do that first.

  2. Navigate to your local project repository from assignment 5. Make sure you are on the hw-5 branch (or whatever branch contains all your changes from assignment 5).

    • Run git branch to check what branch you are on.
    • Run git checkout branch-name to switch to a different branch.

  3. Run git checkout -b hw-6 to create a new branch called “hw-6” that branches off your hw-5 branch. All of the work on your project MUST be done on this branch. You should NOT modify the main branch, or the branches of any previous assignments.

  4. Run git push -u origin hw-6 to publish this new branch on github.

  5. Dedicate one terminal window to running your code with npm.

    • Run npm start in this terminal to run your app and view your changes in the browser.
    • If you want to stop running your code at any time, use Ctrl+C inside this terminal.

  6. Dedicate another terminal window to running normal terminal commands, like git commands.

    • git add . stages all of your current changes so you can commit them
    • git status displays your changes, showing what’s staged and what isn’t
    • git commit -m “commit message here” bundles everything on the stage into a commit
    • git push publishes your commit(s) to github

  7. Now you are ready! Go forth and code!

    • As you progress on this assignment, continue grouping your changes into commits and pushing them to the hw-6 branch on github. All of your commits MUST be on the hw-6 branch, not the main branch or the branches of prevous assignments.

Core requirements

  • Performance
    • Every .map must use a key.
    • Every time elements are added to an array, they must be added to the end.
    • Use at least one of [useRef, useMemo, useCallback, React.memo] to improve the performance of your app.
      • If used incorrectly, the performance of your app will not improve. If your usage does not either reduce the amount of work done per render, or reduce the number of times a component needs to re-render, it does not meet this requirement.
      • This is probably the least important of the core requirements.
  • Maintainability
    • Refactor your code to have a neat and logical file organization.
      • Each file should have limited responsibility.
      • Use subdirectories to organize groups of files.
    • Create and use 1 generic component.
    • Create and use 1 custom hook.

Additional requirements

  • Use more of these: [useRef, useMemo, useCallback, React.memo]. Again, ensure that each time you use one of these functions, it is actually effective in improving the performance of your app.
  • Create more generic components and custom hooks. Try to eliminate redundancy, separate responsibilities, and abstract away implementation details as much as possible.
    • Don't overdo it though. Only abstract where it makes sense.
  • Try out useContext.

Tips

  • When it comes to implementing performance optimizations, console.log is your best friend. Use it to determine when a component has rerendered, what triggered the rerender, etc.
    • To that end, useEffect is also very helpful.
  • Keep in mind how dependency arrays work and the persistence (or lack therof) of variables within functions.
  • Add comments to your code to help keep track of what exactly is a reference.
  • When reorganizing your code, think about how long it would take for a completely new set of eyes to understand what your code is doing. You want to minimize that time.
  • When it comes to readability & maintainability, make sure your decisions are consistent. There is nothing worse than a codebase that looks like it is written by several different people (even if that is actually the case!).
  • Don't worry if it's not perfect. Good is good enough.

Resources

Submission

For feedback from DISC exec

Follow these instructions if you are submitting to get feedback from DISC exec. The deadline for your submission is 1 week after the associated workshop.

  1. Make sure all your changes are committed and pushed onto github (the hw-6 branch, NOT the main branch or any branches for previous assignments).
  2. On github, make a pull request from your hw-6 branch.
    • Do NOT merge the pull request
  3. Once you've created the pull request, copy its URL from the browser.
  4. Fill out this google form

For the Discover Program Application

If you are not submitting for DISC exec feedback, but for your Discover Program Application, follow the submission instructions in the application form.