Move height to layout effect

[Fernando Rojo]

react-native-live-markdown/src/MarkdownTextInput.web.tsx

Lines 467 to 474 in 348fcd2

 useEffect(() => { 
   if (!divRef.current || !multiline) { 
     return; 
   } 
   const elementHeight = getElementHeight(divRef.current, inputStyles, numberOfLines); 
   divRef.current.style.height = elementHeight; 
   divRef.current.style.maxHeight = elementHeight; 
 }, [numberOfLines]); 

Hey! Reviewing the web code, and I'm wondering if this should get moved to a layout effect since it's adjusting the height and you'd want to do this before painting. I'm happy to PR it if so!

[Fernando Rojo]

The same would go for this effect:

react-native-live-markdown/src/MarkdownTextInput.web.tsx

Lines 452 to 465 in 348fcd2

 useEffect(() => { 
   if (!divRef.current || processedValue === divRef.current.innerText) { 
     return; 
   } 
  
   if (value === undefined) { 
     parseText(divRef.current, divRef.current.innerText, processedMarkdownStyle); 
     return; 
   } 
  
   const text = processedValue !== undefined ? processedValue : ''; 
   parseText(divRef.current, text, processedMarkdownStyle, text.length); 
   updateTextColor(divRef.current, value); 
 }, [multiline, processedMarkdownStyle, processedValue]); 

I can test them out a bit to be certain

[Tomek Zawadzki]

@nandorojo Thanks for reviewing the code and suggesting the improvements, feel free to submit PRs!

cc @Skalakid, the author of web implementation

[Fernando Rojo]

Cool.

Making a small note for SSR support:

const useClientEffect = typeof window === 'undefined' ? useEffect : useLayoutEffect

[Tomek Zawadzki]

FYI There's a PR that eliminates .web.tsx file extension in favor of .native.tsx (#168). Let's get it merged first so we can avoid conflicts.

[Fernando Rojo]

Sounds good.

Also, PR opened #169