React: how to re-render component every x seconds?

Question

I am making a Gatsby website where I have a component containing an SVG element (map) which I want to add an animation to. SVG elements should change color one by one in a one-second interval then they should have the new color for two seconds. After that animation should refresh and start all over again. I made CSS animation which I add to particular elements and I used different animation delays and durations. The problem is that I want the animation to run infinitely and I can't use animation-iteration-count: infinite cause animation-delay works only during the first time. I was thinking about re-rendering this component each time animation is finished but I'm not sure if this is the right approach and how correctly implement that. I thought of setting the component state and changing it every x seconds but I went through Gatsby docs and I got confused cause I see that lifecycle methods are different than in React.

Maybe someone could give me a hint on how to accomplish animation refreshing each time it's finished.

import React from "react"
import styled from "styled-components"

const StyledMap = styled.svg`
  @keyframes color {
    from {
      fill: #b6bac0;
    }
    to {
      fill: #ecad1b;
    }
  }
  #part1 {
    animation-name: color;
    animation-duration: 6s;
  }
  #part2 {
    animation-name: color;
    animation-duration: 5s;
    animation-delay: 1s;
  }
  #part3 {
    animation-name: color;
    animation-duration: 4s;
    animation-delay: 2s;
  }
  #part4 {
    animation-name: color;
    animation-duration: 3s;
    animation-delay: 3s;
  }
  #part5 {
    animation-name: color;
    animation-duration: 6s;
    animation-delay: 4s;
  }
  margin-right: 40px;
`
class Map extends React.Component {
  state = {
    animation: "on",
  }

  render() {
    return (
      <>
        <StyledMap
          xmlns="http://www.w3.org/2000/svg"
          width="414"
          height="389"
          fill="none"
          viewBox="0 0 414 389"
        >
          <g fill="#B6BAC0" fillRule="evenodd" clipRule="evenodd">
            <path
              id="part1"
              stroke="#F9F9F9"
              strokeLinecap="round"
              strokeLinejoin="round"
              strokeWidth="0.25"
              d="M121.733 72.075l-.776-1.642-.945-1.357-1.15-1.029-1.552-3.13-.982-1.175-1.743-1.262-.014-3.809-.322-3.83-2.6-7.917 5.705-1.408.651-1-.161-1.736-.769-1.073-.454-1.014.3-1.24 1.084-1.117.432-1.875-.293-3.35-1.266-2.582-3.369-4.874-2.849-5.736-.08-.153-.279.11-8.553 1.262-2.79 1.744-1.42 1.423-.843 1.678.608-.584.534-.219.235.292-.257.941-.527.606-.659.255-.41-.175.22-.686v-.43L91.7 32.075l-1.736 2.992.6-.605.36-.438.812.029.484 1.014-.528.613-1.435.671-.571.686-.645.263-.747.153-.373.139.359-.526.915-.956.513-1.043-2.527 2.977-1.699 1.11-1.406.692 2.226-.7.945.051-.08 1.124.139.102.073-.022.044.058.022.343H85.49v.518h.286v.43l-3.61.636-.886-.635 2.028-.905.513-.525-4.526 1.517-6.598.825-7.938 3.597-8.078 2.174-7.374 1.97-11.388 4.809-9.337 2.444-10.83 4.809-2.937 2.167-1.59.846-1.625.336-4.05-.336-1.252-.474-.447-.372-.674-.307-.695 1.868-.337.226-.396.117.718.883.33 1.08.095-.015.96.438 1.97 2.853.68.452.484.08.644.336.388.059.527-.11.037-.138-.564-.227v-.467l.586-.058.557-.182 1.113-.708.373.277.52-.24.425-.614.08-.839-.344-.445-.666-.299-1.223-.24.351-.453.271-.445.278-.343.36-.139.49.132.344.19.322-.103.403-.693.073.263.015.058.037.015.132.138-.52 1.35.637.708 4.54.474.974.547.564 1.175-.256.248-.374.496-.205.197.212.358.235.255.285.183.36.153-.257-.474.981-.985.315-.548.103-.831h.278l-.132 1.306-.285 1.233-.147 1.386.286 1.744-.638.03-.446.262-.403.117-.469-.409L19.15 79l-.27 1.517 1.273 3.058.469.248 1.047.094.44.132-.037.401.007.27.03.263-.564.445-.345.416-.183.642-.05 1.102-.213.204-.476-.613-1.34-2.583-.623-.89-.769-.599-2.197-.787-1.801-.307-.454-.38-.82-.882-1.113-.533-.579-.445-.483-1.335-.506-.38-.57-.284-.404-.358-.227.511.396.233.132.234-.132.24-.396.234.718.504-.051.561-.542.504-.74.314-.395.05-.008.008.052 1.934-.169 1.072.623 1.343.857 2.67.073.679-.11 2.517.03 1.518.3 1.415.995 1.54.425 1.43.857 1.445.425 3.546.864 3.984.27 1.284.067.576.022 1.234.131.671.25.438.622.525.161.387.535.489-1.07 2.101-.3.452-.432.227-.403.612-.293.832-.11.905.147 1.102.242.963.088.985-1.23 3.845-.11.569-.55 1.226-1.26 1.314-2.409 1.926-2.49 1.299-1.984 1.474v.423l.249.678.498 2.401.095.846-.168 1.277-.425.817-1.091.942.468.955.718.555.857.27.908.066.82.364 1.333 1.577 1.12.598 4.35 3.203.63.744 1.406 2.766.425.408.776.365 1.18 1.605 2.445.971 2.38 2.67.996-3.59.9-1.342 3.48-.555 2.072-.875 3.207-4.51 2.6-5.698 4.006-2.211 6.796 2.255 2.167-.307 2.512-2.918 1.56-2.948-1.12-.19-.813-1.102 2.314-.124 6.935-2.378 8.436.029 2.065-1.511 3.677-4.691 2.145-1.7 2.226-.307 2.058.453 1.077 3.327-.747 3.218 2.263.751 2.504 1.496 2.556-.35 2.512-.978 3.947-3.729 3.317-5.195 5.925-3.458 3.017-.934 1.186-1.124.96-1.707 1.259-1.554-.256-1.963-1.282-1.635-1.516-.795-3.09-.788-2.57-2.488-.63-2.437-.044-2.73.923-1.305 7.535.197 1.23-.24 1.048-4.371.791-2.255 1.076-1.875 1.465-.65 1.56-.043 1.53.488-.718-7.464 1.714-1.751 1.216-2.153-.454-1.459-.711-1.175-.82-.394-.044-1.357 2.051-.963 2.27.3z"
            ></path>
            <path
              id="part2"
              stroke="#F9F9F9"
              strokeLinecap="round"
              strokeLinejoin="round"
              strokeWidth="0.25"
              d="M317.774 273.014l-.132-.875-.205-1.387-1.04-3.954-.073-.606-.095-.226-.191-.117-.183-.168-.095-.372.051-.401.103-.19.109-.124.044-.204.301-2.802-.125-1.262-.761-.562v-.445l.293-.059.358-.167.323-.278.168-.379-.161-.876-13.094 2.715-6.774-2.116-3.149-.27-2.797-1.817-.264-.985-.176-1.08-1.223-1.379-.344-2.189-1.237-.423-1.282 1.211-1.201 1.678-1.355.766-5.69.912-4.95-1.029-1.055-.795-.864-1.379-.952-1.087-6.737-4.13-1.216-3.072-2.263-.81-1.171.876-1.502 3.707-1.362.627-1.362.212-1.296.634-2.841 2.693-1.319.379-4.525-.635-1.275.467-1.003 1.321-1.018 3.918 1.868 2.831 1.267 1.007.395 2.167-.322 2.116-.93 1.102-5.405-3.955-1.45.263-.527 2.087-.029 2.065.168 2.043-.696 1.941-1.42.948-1.187 1.102-.952 1.591 3.508.678.513.278.146.722.015.795-.198.511-2.805.46-1.537 2.911 1.12 1.335 3.083.883 1.413 1.08 1.143 2.539 1.948 2.364-1.648.248-2.819 2.372-.821 1.78 1.436.744 2.783.416 1.149.453 3.86.007 1.603.861 1.384 1.445 3.435 1.08 3.149 2.101 1.867 3.692.696 2.941.703 1.488 1.86 2.605.769 1.634 3.01 1.803 5.375.145 1.23-1.306.162-.671.505-.788 1.318-.635.571-.554.117-.336.052-.678.139-.314.168-.117.366-.022.139-.08.865-.868.256-1.095.271-.394 1.567 1.489.674-.314.556-.584.542-.35.63.416.557-.365 1.12-.109.381-.219.403-.533.344-.299.417-.161 3.039-.102.623-.168.454-.386.381-.431.388-.321 1.684-.81.41-.102.608.241.359.474.403.35.725-.153v-.102l.71-1.007.293-.219.22-.015.153-.124.044-.539.22-.336.476-.241.483-.438.22-.904.381.321.278.014.461-.335.044-.197-.044-.314-.022-.278.162-.131.585.051.14-.051 2.511-2.181.769.342 1.04-.226 1.047-.613.777-.817-.396-1.014-.161-.299 3.911-1.751 2.629-.679.747-.635 1.259-1.51.513-1 .212-1.233.293-1.007 1.941-2.306 1.172-1.955.703-.503 1.076-.176.732-.394.623-.948.483-1.153.293-1.022.337-2.539-.051-2.386z"
            ></path>
            <path
              id="part3"
              stroke="#F9F9F9"
              strokeLinecap="round"
              strokeLinejoin="round"
              strokeWidth="0.25"
              d="M240.646 295.743l-.271-1.386-1.149-.453-2.783-.416-1.436-.744.821-1.78 2.819-2.372 1.648-.248-1.948-2.364-1.143-2.539-1.413-1.08-3.083-.883-1.12-1.335 1.537-2.911 2.805-.46.198-.511-.015-.795-.146-.722-.513-.278-3.508-.678-4.445-2.262-4.101.219-1.384-.416-3.823-6.078-2.46-2.262-2.754-.511-1.413 1.226-3.266.015-2.651-.548-5.353-2.889-1.253-1.277-1.442-.285-1.296.898-1.333.627-5.786.19-2.05 1.007-1.413 4.976-.513.613-.308 1 .257 1.466.549 1.197-.293 2.291-3.2 2.058-1.099 2.305-.725 4.035-.974 2.627.791 2.445 1.084 1.473 1.326 1.015 1.31 1.408.462 2.306-5.947-.059-1.193.285-.542 1.452.454 1.131-.081 1.145-.9.423-.879.176-.374 1.306.696 8.201-.037 3.269-.439 1.853-3.962 1.853-2.453 1.861-5.163 1.073-2.431 4.757-.059 1.058v.007l.579.146 2.387 1.562-.264 1.167.535.62 2.614.497.623.342 1.289 1.11.483.218.959.197.484.358.175.35.286.985.227.423.813.664.593-.116 1.143-.993-.044-.109-.059-.073-.066-.037h-.095l1.655-.204 1.582.562 3.039 1.678h.952l1.611-1.029.608.365.249 1.146-.103.97.183.781 1.084.584-1.12 1.298.014 1.701.711 1.918.966 1.985.41 1.832.257.474.542.379 1.267.11.578.182.535.431.805.948.513.314.6-.051.638-.277.637-.11.615.453.168.496.278 2.167.191.605.483 1.095.176.569.593 2.685.117 1.299-.175 1.051 4.057.372 1.179.722-.359 1.058.044.89.197.854.11.927-.175 2.065.234.7.798.153 1.033-.08 1.581-.919.894-.212.381.131.813.591.388.197.424.03 1.026-.205 1.267-.503.292-.504.103-.78.293-1.219.117-.029.505-.007.176-.139.103-.416-.081-.299-.132-.19-.073-.073.659-2.036.557-.89.593-.569.674-.328.783-.168 1.26.015.425-.073.578-.234.308-.263 3.551-3.91.154-.314.235-.102.227.094v-.007l-.213-.729-.959-.65-.52-1.138.344-1.314.696-1.408.139-1.656-2.768-.489-1.531-.693-1.325-1.24-.623-1.941-.827-1.518-2.087-.817-1.223-2.189-.088-2.116-.879-1.102-1.084-.117-.827-1.072.468-2.124.908-1.86.901-1.321 9.703-10.879-1.904-2.641-2.175-2.167 1.289-1 2.732.387 1.779-2.532 1.135-2.284 1.099-1.634 2.27 1.306 1.047-.008 1.04-.233 3.625-2.817 2.248-.35 2.292.183 1.297-.205 5.17-3.239-.103-1.146z"
            ></path>
            <path
              id="part4"
              stroke="#F9F9F9"
              strokeLinecap="round"
              strokeLinejoin="round"
              strokeWidth="0.25"
              d="M367.893 176.613l-.666.211-.681-.423.124-.306.205-.701.205-.357-1.149-1.394-.747-.438-.872.46-.38-1.511-.945-.919-1.201-.379-3.193.437-6.371-1.313-2.161.117-.995-.248-.484-.781-.703.299-.827-.635-.689-.985-.293-.715.249-2.211-.11-.321-.571-.095-.344-.306-.198-.569-.146-.854.037-.598.183-.525.139-.555-.103-.657-.285-.394-.908-.773-.85-1.175-2.285-2.437.125-1.459-.132-2.51-.491-2.379-.256-3.51-.637-3.166-2.373.671-2.307 1.153-1.281-.89-1.025-1.445.651-3.721-1.984-1.496-2.043 2.204-3.105.459-2.915-1.517-1.084-1.971-.564-2.48-.6-1.686-.996-1.029-1.567-.861-1.04-1.86-.169-1.722.659-1.226-1.874-1.452-2.256-.328-2.168-1.182-1.508-2.904-2.278-5.721-1.025-7.836-.659-2.693-.937-2.218-.542-2.371-4.951.38-1.01.546-1.172 2.313-1.67 1.182-1.86.285-3.632-.343-3.105 3.692-3.684 1.175-3.91-.015-3.003 1.729-2.599.54-2.93-.036-1.479 1.204-1.355 1.612-5.726 3.306-1.494.445-1.575-.168-1.267.985-.695 2.298-1.062 1.241-1.238.62-3.076.569-12.925-1.992-.359-.43-.263-.599-.638-.437-.703-.154-1.625.504-1.055 2.094-1.186.985-1.414.357-1.962 1.584-2.095.985.242 1.284.037 1.335.329 2-.117 1.335-.22 1.321-.388 1.152-.783-.094-.755-.54-.791-.329-.871.832-.762 1.16-1.713 1.438-1.999-.263.637 2.773-.205 2.488-.821.904-.344 1.365.454 1.408.681 1.277 1.179 2.838.037 2.226-1.758.474-2.753 8.004-1.084 2.219-.22 2.568.843.861.168 1.24-3.024 4.984-.169 1.124-.271 1.138 3.947 2.714 4.306.912 2.102.985 3.786 3.05 8.502-1.758 1.304-1.328 1.523-.139 1.113 1.416.989 1.714 1.281.664 1.45.431 1.128.781.52 1.7.139 2.334.835 1.847.586.313.63-.153 2.819 1.131 1.597 1.073.563.715-.424 3.32-1.362.795.336 1.408 1.099 1.255.974 1.459-.103 1.248.359 1.073 1.472.474 4.343-.496 2.717 1.248 2.966 2.298 2.409 3.218.264 1.087-.367.751-.41.606-.212.839.381 1.875 2.204 2.299.622 1.671-.102 1.568-.527 1.08-2.974-.416-2.453-1.32h-3.193l-1.062 3.692 1.216 2.918.403 2.022.154 2.086.307 1.058 1.509.723.534.598-.007 2.101-.681 1.803-2.629 2.444-.52 1.78.139 1.919 2.263.81 1.216 3.072 6.737 4.13.952 1.087.864 1.379 1.055.796 4.95 1.028 5.69-.912 1.355-.766 1.201-1.678 1.282-1.211 1.237.423.344 2.189 1.223 1.379.176 1.08.264.985 2.797 1.817 3.149.27 6.774 2.116 13.094-2.715-1.003-2.502-.323-2.08-.38-1.167-.088-.511.066-.744.153-.569.345-.949.739-4.05.498-1.043.388-.328.447-.066-.073-1.364.498-1.978.249-1.875-1.633-1.948.08-1.591.96-.773.988-1.379.044-2.678-1.259-.124v-.453l.622-.729-.139-.81-.74-1.146-.088-.926.037-.745-.147-.583-.637-.431-.388-.036-1.01.445-.718.073-2.109-.445-1.135-.526-.608-.715-.513-.875-.058-.679.425-1.678 1.479-.394 1.464.598 2.981.467 2.9-1.029 1.018-.963.278-1.496-2.065-3.166 1.582-2.218 2.255-1.365-1.435-2.189-.996-2.451-.168-1.752-.806-1.729-.659-1.853-.256-1.671 2.907-2.16 3.112-.897 5.925.036 5.602-1.109 2.08.387 1.435-.46 3.911-2.926 1.567-.182 4.504.43 2.27-1.853.197-.992.264-.84.674-.722.747-.496 1.677.387 4.796 2.466 1.59-.598 1.354-1.73 1.172-2.729 3.889-5.735 1.31-2.459-.615.424z"
            ></path>
            <path
              id="part5"
              stroke="#F9F9F9"
              strokeLinecap="round"
              strokeLinejoin="round"
              strokeWidth="0.25"
              d="M232.261 29.77l-3.185-.168-2.029-.7-.871-.708-.696.306-2.519 2.627-1.296.598-1.612.372-3.383 1.642-15.356 2.291-1.121-.343-.483-.262-.352-.358-1.274.708-1.523-.117-6.906-2.233-.688-.963-.249-.605-.586-.387-.681-.212-.549-.058-.645-.219-1.245-.956-.644-.211-.571-1.175-.271-2.627-.03-2.78.161-1.612-.322-.679-1.032-3.203-.513-.788-.33-.934.242-1.168-.681.876-.776.16-.469-.583.249-1.38-.476-.495-.015-.467.162-.467.022-.54-.601-1.3-.491-.867-.219-.263-.982-.438-.219-.263V7.793l.08-.467.579-2.021.263-.358.498-.226.352.16 1.325 1.03.389.546 2.402 1.16 2.445 1.679 1.158.401.395.664.359.153 1.435.292.381.183 1.948 3.298.674.86.498 1.321.747.526.249.51.205.511.175.24.725-.35-.044-.955-.417-1.095-.41-.773-2.549-3.305-13.979-8.355-.865-.197-.542-.285-1.486-1.298-.93-.343h-6.73L155.61 2.306l-6.95 2.378-15.481 2.934-12.347 5.778-3.918 4.305-1.552.555-1.736.3-3.046 1.21.08.154 2.849 5.735 3.369 4.874 1.266 2.583.293 3.349-.432 1.875-1.083 1.116-.301 1.24.454 1.015.769 1.073.161 1.736-.651 1-5.705 1.408 2.6 7.917.322 3.83.014 3.81 1.743 1.261.982 1.175 1.552 3.13 1.15 1.03.945 1.356.776 1.642-2.27-.299-2.051.963.044 1.357.82.394.711 1.175.454 1.46-1.216 2.152-1.714 1.751.718 7.464 1.97 2.423 1.692 2.984 2.394 1.46 8.334.342 2.19 1.197 1.816 2.182 1.15-.7 1.23-4.313.996-2.174 1.142-1.576 1.509-.161 5.683 1.481 2.548-1.029.022-1.452.161-.985.234-.89 1.311-1.226 2.812-1.043 1.663-3.057 1.106-.861 5.199 1.014 6.935-1.036 1.435.124 1.209 1.547 1.34 1.277 7.367 1.225 3.486 2.073 1.523-1.007 2.358-.84 3.339.475.806.452.556.664.66.43 2.694 2.78 1.267.81 2.234.884 4.665-.278 2.211-.978 6.042-11.236 1.45-1.576 1.714-1.08 3.302.219 2.314-1.022.081-1.116.491-.759.644-1.97.747-.759.498-.912v-1.16l.161-1.124-2.05-.554-4.05.328-1.457-.708.798-2.729-1.069-1.452-2.102-.277-1.977-1.167-1.37-2.255-.739-2.984-.11-1.365.652-.97 1.786-1.81.637-1.123.469-1.277-.432-1.744-.842-1.489-.901-2.677.286-2.38.988-1.13 3.647.474.96-.124v.518l-.388.365-.293.628-.161.846-.03 1.022.549-.54.725-1.905.279-.416.263-.262 1.033-1.686 1.04-.97.52-.336.52-.124 3.185-2.014.674-.277 1.611-.226 2.651-1.948.549-.227.594-.087.351-.365.22-.766.322-.693.644-.132-.073-.32-.11-.76-.073-.313.454.043.161-.087z"
            ></path>
          </g>
        </StyledMap>
      </>
    )
  }
}

export default Map

Answer 1

You can achieve the same result by creating a boolean state that manages the SVG component's class in order to trigger a CSS animation based on it.

• Initialize the boolean state:

  state = {
    animation: false,
  }
  

• Set the handling function with your interval:

  const handleOn = () => setInterval(()=> this.setState({animation: !this.state.animation}), 2000);
  

• Add the switching class name logic to your SVG:

  <StyledMap
    xmlns="http://www.w3.org/2000/svg"
    width="414"
    height="389"
    fill="none"
    viewBox="0 0 414 389"
    className={`${this.state.animation ? 'on': 'off'}`}
  >
  

• Apply the animation only for on class name (when animation's state is true).

• You only last to call the handleOn function whenever you want, inside a componentDidMount lifecycle could be a good place.

Re-rendering a component based on a setInterval is not the best approach in terms of performance, speed, UX, and web load. In addition, the animation would be difficult to handle and to match exactly at the same time.

By the way, lifecycles in Gatsby are exactly the same than in React since Gatsby works (and it's based) in React.