Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Use useLayoutEffect instead of useEffect for string parsing and height measurements #169

Merged
merged 2 commits into from
Feb 19, 2024

Conversation

nandorojo
Copy link
Contributor

@nandorojo nandorojo commented Feb 8, 2024

Details

useLayoutEffect is a version of useEffect that fires before the browser repaints the screen.

Screenshot 2024-02-08 at 10 34 58 AM

It's ideal for cases where dimensions are derived from a DOM element and then updates some other element before react paints the screen. These seem like good use cases.

Related Issues

GH_LINK

close #166

Manual Tests

I didn't add any tests, I'll try a video comparison maybe?

Linked PRs

Copy link

github-actions bot commented Feb 8, 2024

CLA Assistant Lite bot All contributors have signed the CLA ✍️ ✅

@nandorojo
Copy link
Contributor Author

CLA throws a 404

@AndrewGable AndrewGable mentioned this pull request Feb 8, 2024
@tomekzaw tomekzaw closed this in #170 Feb 8, 2024
@AndrewGable AndrewGable reopened this Feb 8, 2024
@AndrewGable
Copy link
Contributor

Oops - CLA should is added now!

@@ -464,7 +466,7 @@ const MarkdownTextInput = React.forwardRef<TextInput, MarkdownTextInputProps>(
updateTextColor(divRef.current, value);
}, [multiline, processedMarkdownStyle, processedValue]);

useEffect(() => {
useClientEffect(function adjustHeightt() {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
useClientEffect(function adjustHeightt() {
useClientEffect(function adjustHeight() {

@@ -9,7 +9,7 @@ import type {
TextInputKeyPressEventData,
TextInputFocusEventData,
} from 'react-native';
import React, {useEffect, useRef, useCallback, useMemo} from 'react';
import React, {useEffect, useRef, useCallback, useMemo,useLayoutEffect} from 'react';
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
import React, {useEffect, useRef, useCallback, useMemo,useLayoutEffect} from 'react';
import React, {useEffect, useRef, useCallback, useMemo, useLayoutEffect} from 'react';

@robertKozik robertKozik changed the title Update MarkdownTextInput.web.tsx Use useLayoutEffect insted of useEffect for string parsing and height measurements Feb 19, 2024
@robertKozik
Copy link
Collaborator

@nandorojo can You sign the CLA so we would be able to proceed with the merge 🙇🏼

@nandorojo
Copy link
Contributor Author

I have read the CLA Document and I hereby sign the CLA

@tomekzaw tomekzaw changed the title Use useLayoutEffect insted of useEffect for string parsing and height measurements Use useLayoutEffect instead of useEffect for string parsing and height measurements Feb 19, 2024
@tomekzaw
Copy link
Collaborator

Thanks!

@tomekzaw tomekzaw merged commit a06c0a7 into Expensify:main Feb 19, 2024
2 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Move height to layout effect
4 participants