search

M0nica / how-many-days-until

A React countdown app of days between today and next year.
https://m0nica.github.io/how-many-days-until/
10 stars 32 forks source link

Feature/christmas counter #27

Closed zarasyversen closed 5 years ago

zarasyversen commented 5 years ago

13 Christmas Counter 🎅 🤶 🎄 🎁

I added a Christmas Counter component in Components/Christmas With some free svg icons as well - I wasn't sure about the non-christmas one lol so it became a drum, like drumroll! I need to give credit for the icons so added it in a footer. Let me know how you feel about it! I also move some of the CSS we can use reuse from App.css and moved it to index.css.

If it's not Christmas:

screen shot 2018-10-12 at 21 35 43

If it is Christmas:

screen shot 2018-10-12 at 21 36 01

I have not linked my component at all as I am unsure how we will add the different holidays - like will they be different routes or just switching between components. Locally I just switched out the app rendered in index.js to use my new component import Christmas from './Components/Christmas';

I am quite new to React and I was unsure what this does:

React.PureComponent<*> {
  render(): ?React$Element<*> {

Instead, I imported { Component } at the top and did class Christmas extends Component instead. Hope that is ok! Seemed to work the same.

M0nica commented 5 years ago 

If your React component’s render() function renders the same result given the same props and state, you can use React.PureComponent for a performance boost in some cases.

source: https://reactjs.org/docs/react-api.html#reactpurecomponent

Use shouldComponentUpdate() to let React know if a component’s output is not affected by the current change in state or props. The default behavior is to re-render on every state change, and in the vast majority of cases you should rely on the default behavior. source: https://reactjs.org/docs/react-component.html#shouldcomponentupdate

@zarasyversen Thank you for this contribution. My understanding from reading the doc is that PureComponents is a way to reduce the number of re-renders and improves performance. Instead of always re-rendering what state or props change you can write a function shouldComponentUpdate() to let the component know what changes it can disregard (and thus not trigger unnecessary re-renders)