gitadmin/freeCodeCamp
1
0
Fork 0
mirror of https://github.com/freeCodeCamp/freeCodeCamp.git synced 2026-05-28 18:26:54 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor: memoize only selectors that compute (#58499)

Browse Source
This commit is contained in:
Oliver Eyton-Williams
2025-01-31 17:28:42 +01:00
committed by GitHub
parent 1738b1f05f
commit 0b9d914602
2 changed files with 11 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/templates/Challenges/classic/show.tsx
+7 -7
View File
@@ -6,7 +6,6 @@ import { connect } from 'react-redux';
import { HandlerProps } from 'react-reflex'; import { HandlerProps } from 'react-reflex';
import { useMediaQuery } from 'react-responsive'; import { useMediaQuery } from 'react-responsive';
import { bindActionCreators, Dispatch } from 'redux'; import { bindActionCreators, Dispatch } from 'redux';
import { createStructuredSelector } from 'reselect';
import store from 'store'; import store from 'store';
import { editor } from 'monaco-editor'; import { editor } from 'monaco-editor';
import type { FitAddon } from 'xterm-addon-fit'; import type { FitAddon } from 'xterm-addon-fit';
@@ -22,6 +21,7 @@ import {
ChallengeNode, ChallengeNode,
CompletedChallenge, CompletedChallenge,
ResizeProps, ResizeProps,
SavedChallenge,
SavedChallengeFiles, SavedChallengeFiles,
Test Test
} from '../../../redux/prop-types'; } from '../../../redux/prop-types';
@@ -72,11 +72,11 @@ import { mergeChallengeFiles } from './saved-challenges';
import './classic.css'; import './classic.css';
import '../components/test-frame.css'; import '../components/test-frame.css';
const mapStateToProps = createStructuredSelector({ const mapStateToProps = (state: unknown) => ({
challengeFiles: challengeFilesSelector, challengeFiles: challengeFilesSelector(state) as ChallengeFiles,
output: consoleOutputSelector, output: consoleOutputSelector(state) as string[],
isChallengeCompleted: isChallengeCompletedSelector, isChallengeCompleted: isChallengeCompletedSelector(state) as boolean,
savedChallenges: savedChallengesSelector savedChallenges: savedChallengesSelector(state) as SavedChallenge[]
}); });
const mapDispatchToProps = (dispatch: Dispatch) => const mapDispatchToProps = (dispatch: Dispatch) =>
@@ -120,7 +120,7 @@ interface ShowClassicProps extends Pick<PreviewProps, 'previewMounted'> {
openModal: (modal: string) => void; openModal: (modal: string) => void;
setEditorFocusability: (canFocus: boolean) => void; setEditorFocusability: (canFocus: boolean) => void;
setIsAdvancing: (arg: boolean) => void; setIsAdvancing: (arg: boolean) => void;
savedChallenges: CompletedChallenge[]; savedChallenges: SavedChallenge[];
} }
interface ReflexLayout { interface ReflexLayout {
client/src/templates/Challenges/redux/selectors.js
+4 -5
View File
@@ -20,11 +20,10 @@ export const completedChallengesIdsSelector = createSelector(
completedChallengesSelector, completedChallengesSelector,
completedChallenges => completedChallenges.map(node => node.id) completedChallenges => completedChallenges.map(node => node.id)
); );
export const isChallengeCompletedSelector = state => { export const isChallengeCompletedSelector = createSelector(
const completedChallenges = completedChallengesSelector(state); [completedChallengesIdsSelector, challengeMetaSelector],
const { id: currentChallengeId } = challengeMetaSelector(state); (ids, meta) => ids.includes(meta.id)
return completedChallenges.some(({ id }) => id === currentChallengeId); );
};
export const isCodeLockedSelector = state => state[ns].isCodeLocked; export const isCodeLockedSelector = state => state[ns].isCodeLocked;
export const isCompletionModalOpenSelector = state => export const isCompletionModalOpenSelector = state =>
state[ns].modal.completion; state[ns].modal.completion;