score:0

import * as React from "react";
import "./styles.css";

const Text = React.forwardRef<HTMLSpanElement>((props: any, ref) => {
  console.log("RENDERING TEXT")
  return <span ref={ref}></span>
});

export default function App() {
  const dateTimeRef = React.useRef<HTMLSpanElement>(null);

  console.log("RENDERING APP");

  React.useEffect(() => {
    const secondsTimer = setInterval(() => {
      if (dateTimeRef.current) {
        dateTimeRef.current.innerText = new Date().toLocaleString();
      }
    }, 1000);
    return () => clearInterval(secondsTimer);
  }, []);

  return <Text ref={dateTimeRef} />;
}

score:0

// Example logic for only re-rendering every 5 seconds; Adapt as needed.
shouldComponentUpdate(nextProps, nextState) {
  if (this.lastUpdatedTimeInSeconds+5 >= nextState.timeinseconds) {
    return false;
  }
  this.lastUpdatedTimeInSeconds = nextState.timeinseconds
  return true;
}

score:0

import React, { useEffect } from 'react';
import { TextInput } from 'react-native';

const Timer: React.FC = () => {
  updateTime = (currentTime) => {
    time.setNativeProps({ text: currentTime });
  };

  useEffect(() => {
    const secondsTimer = setInterval(() => {
      updateTime(new Date().toLocaleString());
    }, 1000);
    return () => clearInterval(secondsTimer);
  }, []);

  return <TextInput ref={(component) => (time = component)} editable={false} />;
};

export default Timer;

Related Query

More Query from same tag