controlar re-renderizado en pantalla desafío #300
Conversation
| const vBlocklyArea = useMemo<JSX.Element>( () => { | ||
| return <VerticalChallengeWorkspace blocklyWorkspaceProps={blocklyWorkspaceProps} challenge={challenge} />}, [] ); | ||
|
|
||
| const hBlocklyArea = useMemo<JSX.Element>( () => { | ||
| return <HorizontalChallengeWorkspace blocklyWorkspaceProps={blocklyWorkspaceProps} challenge={challenge} />}, [] ); | ||
|
|
There was a problem hiding this comment.
¿Son necesarios estos useMemo? Pregunto porque en cada componente se está haciendo tambien un useMemo.
Se podría simplificar con algo como:
const challengeWorkspace = useMemo<JSX.Element>(
() => { return isSmallScreen ? <VerticalChallengeWorkspace blocklyWorkspaceProps={blocklyWorkspaceProps} challenge={challenge} /> : <HorizontalChallengeWorkspace blocklyWorkspaceProps={blocklyWorkspaceProps} challenge={challenge} /> }, []
)Para que quede un único useMemo.
| return <> | ||
| <Stack flexGrow={1} direction='column' height='100%'> | ||
| <StatementDescription | ||
| text={descriptionOrClue} | ||
| setShowStatement={setToShow} | ||
| clueIsEnabled={clue !== ''} | ||
| urlImage={challenge.imageURL()} /> | ||
| {isSmallScreen ? <VerticalChallengeWorkspace blocklyWorkspaceProps={blocklyWorkspaceProps} challenge={challenge} /> : <HorizontalChallengeWorkspace blocklyWorkspaceProps={blocklyWorkspaceProps} challenge={challenge} />} | ||
| {isSmallScreen ? vBlocklyArea : hBlocklyArea } |
There was a problem hiding this comment.
Y acá usar el challengeWorkspace de arriba directamente
| const blocklyWorkspace = useMemo<JSX.Element>( () => { | ||
| return <EditableBlocklyWorkspace blockIds={blocklyWorkspaceProps.blockIds} categorized={blocklyWorkspaceProps.categorized} isVertical={false} /> | ||
| },[]) | ||
|
|
There was a problem hiding this comment.
Y acá no hacer estos useMemo, ya que se haría arriba en el challengeWorkspace
There was a problem hiding this comment.
@dlopezalvas contesto sobre el último, pero da igual en cualquiera ya que es un todo.
Intenté aplicar tus sugerencias, pero al hacerlo, ya sea en el cambio de modo (de v a h) da un error (entiendo q por la consulta de SmallScreen dentro del useMemo que quiza por el tipo de componente no se pueda resolver simplemente) y en el caso de quitar estos ultimos de cada "EditableBlocklyWorkspace" deja de funcionar, por ejemplo, el uso del boton del footer de info, porque al pulsarlo, limpia el workspace de blockly, no asi las pistas...
Las pruebas sin esos memos y con los cambios propuestos, aunque coherentes, no hacen lo esperado o rompen.
Co-authored-by: Diana López Alvas <[email protected]>
Resolves #298
vokoscreenNG-2024-06-18_11-42-06.mp4
vokoscreenNG-2024-06-18_11-42-46.mp4