Ross Wintle Site

Learning about useEffect today. Gosh React is hard work!



The thing I want to remember is how the second parameter (the dependencies array) works.



There are three options for this:



No dependencies array &#8211; this causes the effect to run on initial render and EVERY re-render



<pre class="wp-block-code"><code>useEffect(
 () => {
 // Some side effect
 }
 // No second param - effect runs on EVERY render.
)</code></pre>



Empty dependencies array &#8211; this causes the effect to only run on initial render &#8211; it won&#8217;t run on re-renders



<pre class="wp-block-code"><code>useEffect(
 () => {
 // Some side effect
 },
 &#91;] // Empty second param - effect runs on INITIAL RENDER ONLY.
)</code></pre>



Non-empty dependencies array &#8211; this causes the effect to run a) on initial render b) on any re-render when the state values in the array have changed



<pre class="wp-block-code"><code>&#91;name, setName] = useState({ firstName: 'Ross', lastname: 'Wintle' })

useEffect(
 () => {
 // Some side effect
 },
 &#91;name] // Non-empty second param - effect runs on initial render and when name has changed.
)</code></pre>



The thing I really don&#8217;t get is how the examples used in the Scrimba course cause this double initial render. They use the <code>useEffect</code> hook to run an API query to fetch data after the initial render. This will then trigger a re-render.



So I&#8217;m hoping that a future lesson shows me how to load the data before the initial render. Maybe this would slow down a client-side page load, but it seems like exactly what I would want to do if I was server-side rendering.



UPDATE: It looks like this is exactly what frameworks like Next.js help with! So I&#8217;ll be digging into that soon.

useEffect

Interesting thing I learned from the Scrimba course today.



If you want to pass number-type props into a React component then you can surround them with braces to escape into JS from the JSX:



<pre class="wp-block-code"><code>&lt;Card 
 img="katie-zaferes.png"
 rating="5.0"
 reviewCount={6}
 country="USA"
 title="Life Lessons with Katie Zaferes"
 price={136}
/></code></pre>



I was actually curious about whether or not this was possible while I was doing the exercise.



I also note, if I haven&#8217;t done so already, that destructuring is a good way to get at props within the component&#8230;



<pre class="wp-block-code"><code>export default function Card(props) {
 const { image, rating, reviewCount, country, title, price } = props;
 return (
 // JSX here can use, for example, image, instead of props.image
 )
}</code></pre>

React: Passing props

I spent most of my learning time today figuring out Atlas from <a href="https://developers.wpengine.com/docs/atlas/overview">the docs</a>. There wasn&#8217;t much in there that I didn&#8217;t expect to see. They seem a little out of date, but not horrendously so.



I really wanted an overview of the architecture and maybe more of a &#8220;Quick Start&#8221; guide.



I also found it odd that there&#8217;s an assumption that <a href="https://developers.wpengine.com/docs/atlas/getting-started/deploy-from-existing-repo">you know and will use a JS framework</a>, but that you maybe don&#8217;t have some of the very basics, like <a href="https://developers.wpengine.com/docs/atlas/local-app-development/prerequisites">Git installed</a>. I guess you have to put this in docs, but if feels like one might be able to make some assumptions about the audience?



Anyway, my post from yesterday was still not showing on the front-end. I didn&#8217;t want to perform an app rebuild &#8211; this seems like it shouldn&#8217;t be necessary. So what was wrong?



I dived into the GraphiQL interface to make a query, that brought back my post. So GraphQL seems fine.



And after that the post showed up on the front-end!



So it will be interesting to see what happens when I publish this.



&#8230;



Yep. Latest posts doesn&#8217;t refresh.



Does running the GraphQL query fix that?



Nope.



So what did I do?



The /posts page still hasn&#8217;t updated either. Just the latest posts on the homepage.



How do I fix this?!

Figuring out Atlas

I&#8217;ve been learning about headless WP and React using a variety of resources including the <a href="https://scrimba.com/learn/learnreact/">free Scrimba React course</a>.



Today I got my complimentary account set up at WP Engine and set up an Atlas site.



I&#8217;d read about <a href="https://fedi.simonwillison.net/@simon/109779165326982978">the idea of keeping your own, internal engineering journal</a>, and so my aim is that I&#8217;ll post about learning and work here.



Atlas setup initially went smoothly. I had to give Atlas broad-ranging permissions to GitHub which I didn&#8217;t really like. I wanted to create a repository and give it just access to that. But it&#8217;s OK. I trust Atlas and WPE.



Once set up I had <a href="https://github.com/rosswintle/atlas-headless-test">a repo</a> to explore (this may be private, so you may not be able to see it, but it&#8217;s based on the regular blueprint &#8211; I can&#8217;t find a link to this, but the <a href="https://developers.wpengine.com/docs/atlas/overview">Atlas Docs</a> have some info on it)



The repo seems to contain a lot of boilerplate. This is something I&#8217;ve seen in Next/React projects. Little files with just a few lines that don&#8217;t seem to do anything other than reference other things. This all seems a bit odd to me. But I&#8217;m sure I&#8217;ll get used to it.



I also went into WordPress and deleted all of the posts to have a clean slate for this blog, but the front-end still shows all the posts. I thought it would rebuild automatically?



Need to look at the docs.



Links to follow up on:



<ul class="wp-block-list">
<li>https://developers.wpengine.com/docs/atlas/overview</li>



<li>https://developers.wpengine.com/blog/what-is-faust-js-the-headless-wordpress-framework</li>
</ul>

Tag: React

useEffect

React: Passing props

Figuring out Atlas

Getting started with Atlas