aviral243

const colorChanged = (color) => {
    // State changed using setter function
    setcolor({r: color.r, g: color.g, b: color.b, a: color.a});
}

// The callback function behaviour is mimicked using useEffect hook with a dependency
// The dependency specifies when the useEffect hook will run, in this example, whenever color changes, useEffect is run.

useEffect(() => {

aviral243

  colorChanged(color) {
    this.setState({
        color: {
            r: color.r,
            g: color.g,
            b: color.b,
            a: color.a
        },
 }, () => {

aviral243

A typical class Component

export class WC extends React.Component {
    constructor(props) {
        this._timer = undefined;
    }

    componentDidMount() {
 this._timer = setInterval(() => this.update(), 1000);

aviral243

export const ColorPicker = () => {
    
    // Using useRef() hook for refs
    const _sldR = useRef(null);
    const _sldG = useRef(null);
    const _sldB = useRef(null);
    const _txtR = useRef(null);
    const _txtG = useRef(null);
 const _txtB = useRef(null);

aviral243

export class ColorPicker extends React.Component {

    constructor(props) {
      super(props);
      this.state = {
          r: 0xF0,
          g: 0xC0,
          b: 0xA0
 };

aviral243

Usage of componentDidMount and componentWillUnmount:

componentDidMount() {
    this._timer = setInterval(() => this.update(), 1000);
}

componentWillUnmount() {
    clearInterval(this._timer);
}

aviral243

Updating State using setState

constructor(props) {
  super(props);
 
    this.state = { name: props.name || "" };
    
    this.onInputChange = (e) => {
 this.setState({ name: e.target.value })

aviral243

export const ColorPicker = (props) => {

    // All three state variables (r, g, b) have been initialized separately using a useState() hook.
    // Initial Value is provided as argument to the hook.
    // setX is the setter function returned, in each case.
    
    const [R, setR] = useState(0xF0);
    const [G, setG] = useState(0xC0);
 const [B, setB] = useState(0xA0);

aviral243

export class ColorPicker extends React.Component {
    state = {
        r: 0xF0,
        g: 0xC0,
        b: 0xA0
    };
    
    render() {
 return ();

aviral243

export class ColorPicker extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            r: 0xF0,
            g: 0xC0,
            b: 0xA0
        };