(You can click below to play with the tests live)
Component rerender performance tests through React Profiler comparing the performance of a stateful board and a stateless board for Wordle Clone DSA. The tests are exposed through a TestsInterface component that allows running the tests right from the UI (user interface). Test results are displayed on the UI as well. While running, the tests' data can be observed from the browser's console.
Since the tests are exposed in the UI, the tests and components were carefully written so that there is no side effect interferance for the measured test variables.
You can find a discussion about the tests along with a data table for 30 test trials in the blog post Designing Wordle: Wordle Clone DSA, Part II: Data Implementation, section Rerendering the Board Component, Method II: Using Stateless Variables plus a Switch State Variable.
You can find the code from this repo deployed in a code sandbox ready for test usage at (https://codesandbox.io/s/wordle-clone-dsa-performance-tests-k2cc2k)
To run the tests locally, download this repo from your terminal:
git clone https://github.com/mmartinezluis/wordle-clone-dsa-performance-tests.git
cd into the project:
cd wordle-clone-dsa-performance-tests
install the depedencies:
npm install
and start the React client:
npm start