Concept of react elements, components and instances

References

• React Components, Elements, and Instances by Dan Abramov
  
• Difference between React Component and React Element
  
• How to append element to variable to be render in react
  
• Difference between React Component and React Element
  
• Assign a React component to a variable with extra props
  

Setting up ARC between Onkyo amplifier and Panasonic TV

Background

Want to try the functionality of using ARC to pass through TV audio to Onkyo 626 amplifier to output sound

Problems

After configuring settings in amplifier and TV, the audio is still not playing through my speakers

Solutions

One of the device (media player EGreat A5) is blocking the ARC signal, disconnecting it with the Onkyo amplifier make things work normally

Set-up sharing

Panasonic P55VT50H

• Press remote button "Option", configure VIERA Link as "On"
• You will find "Home theatre" selection in Application section

Onkyo NR626

• The output channel should be selected with "TV/CD"
• The main TV out of amplifier (Out 1) should connect with Panasonic TV's (TV in 2)
• Advanced Settings > Input / Output Assign > Digital Audio Input > TV / CD, configure it as "--"
• Advanced Settings > Source Setup > Audio Selector configured as "ARC"
• Advanced Settings > Hardware Setup > HDMI，HDMI CEC (RIHD) configured as "ON" and Audio Return Channel configured as "Auto"

References

• Onkyo TX NR 626 User Manual
  
• ARC 問題
  
• Onkyo、Sony Bravia, ARC 設定
  
• 電視有ARC的HDMI接喇叭的問題?
  
• Panasonic 49GX800H駁soundbar，兩者都有ARC, 但沒聲出
  
• [教學] ARC問題的可能解決方案
  
• [教學] 很多人卡關ARC. 有冇人用pioneer amp Panasonic 電視成功用到ARC
  

React concepts and learning

1. Usage of useRef

• Syntax: const refObj = useRef(initialVal), where refObj={current: initialVal}
• refObj is mutable
• Value persists through the react lifetime (even after you changed the initialVal)
• Use cases
• Managing DOM directly, e.g.: textfield focus, integrate with 3rd party DOM libraries
• <input ref={textInput} type="text" />, where const textInput = useRef(null) is declared on top of the functional component, by accessing textInput, you retrieve the input DOM element for further processing
• Store instance variables
• Use to store setInterval or setTimeout's ID for clearing at unmount stage. 
• const intervalRef = useRef(null);
• intervalRef.current = setInterval(() => { // something... });
• clear stuffs in return function of useEffect return () => { clearInterval(intervalRef) }
• Use as render counter when you want to know how many re-render made by React (since ref values keep throughout the React lifetime)

2. Usage of useMemo

3. Usage of useCallback

References

• What is the different between the ref={callback} and the ref = “myInput” in react?
  

4. About useEffect and rendering timing

useEffect always run after the UI rendering is done, the useEffect will check the dependecy array against the value of the last render, and run the useEffect callback when they are different from each other.

References

• What are production use cases for the useRef, useMemo, useCallback hooks?