<?xml version="1.0" encoding="UTF-8"?><rss xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:content="http://purl.org/rss/1.0/modules/content/" xmlns:atom="http://www.w3.org/2005/Atom" version="2.0" xmlns:media="http://search.yahoo.com/mrss/"><channel><title><![CDATA[Donald Hruska's Blog]]></title><description><![CDATA[No Description]]></description><link>https://blog.d.onald.org/</link><image><url>https://blog.d.onald.org/favicon.png</url><title>Donald Hruska&apos;s Blog</title><link>https://blog.d.onald.org/</link></image><generator>Ghost 2.9</generator><lastBuildDate>Mon, 13 Apr 2020 06:37:19 GMT</lastBuildDate><atom:link href="https://blog.d.onald.org/rss/" rel="self" type="application/rss+xml"/><ttl>60</ttl><item><title><![CDATA[Flattening an Array in ReasonML]]></title><description><![CDATA[I needed to flatten an array of arrays the other day, and couldn't find any great examples upon a quick search. Here's how to flatten an array in Reason!]]></description><link>http://localhost:2368/array-flatten-in-reasonml/</link><guid isPermaLink="false">Ghost__Post__5e90c50567c74b12d20ef649</guid><category><![CDATA[reasonml]]></category><dc:creator><![CDATA[Donald Hruska]]></dc:creator><pubDate>Fri, 10 Apr 2020 19:18:48 GMT</pubDate><content:encoded><![CDATA[<p>I needed to flatten an array of arrays the other day, and couldn't find any great examples upon a quick search. Here's how to flatten an array in Reason!</p><pre><code class="language-reason">let flattenArray = (arr: array(array('a))): array('a) =&gt;
  Array.(concat(to_list(arr)));</code></pre><p/><p>Here is the OCaml equivalent:</p><pre><code class="language-reason">let flattenArray arr = Array.(concat (to_list arr))</code></pre>]]></content:encoded></item><item><title><![CDATA[React Hooks in ReasonML + ReasonReact]]></title><description><![CDATA[In April 2019, ReasonReact 0.7.0 was released, and with it support for React Hooks in ReasonML. I'm just now getting around to upgrading some of our components, and find myself fully drinking the React Hooks Kool-Aid.]]></description><link>http://localhost:2368/react-hooks-in-reasonml-reasonreact/</link><guid isPermaLink="false">Ghost__Post__5e90aeb800fe520bb2f9e4de</guid><category><![CDATA[reasonml]]></category><dc:creator><![CDATA[Donald Hruska]]></dc:creator><pubDate>Sun, 05 May 2019 21:58:00 GMT</pubDate><content:encoded><![CDATA[<p>In April 2019, ReasonReact 0.7.0 was released, and with it support for React Hooks in ReasonML. I'm finally getting around to upgrading some components, and find myself fully drinking the React Hooks Kool-Aid as it pairs so well with Reason.</p><p>ReasonReact 0.7.0 brings the ability to write function components in ReasonML. Previously complex <code>reducerComponent</code> logic is now much more elegant. ReasonReact supports all of the hooks provided by React. There are a few minor differences, detailed in <a href="https://reasonml.github.io/reason-react/docs/en/components#hooks">the documentation</a>, but jumping in and converting an existing component to a function component using Hooks is pretty straightfoward.</p><p>Let's convert a basic component. Prior t0 v0.7.0, say you had the following component:</p><pre><code class="language-reason">type state = {value: string};

type action =
  | UpdateValue(string);

let component = ReasonReact.reducerComponent("SearchInput");

let make = _children =&gt; {
  ...component,
  
  initialState: () =&gt; {value: ""},

  reducer: (action, _state) =&gt;
    switch (action) {
    | UpdateValue(updatedValue) =&gt; ReasonReact.Update({value: updatedValue})
    },

  render: ({state, send}) =&gt; {
    &lt;input
      value={state.value}
      onChange={event =&gt; send(UpdateValue(ReactEvent.Form.target(event)##value))}
    /&gt;;
  },
};
</code></pre><p>Using the power of React Hooks, that component can now be simplified to:</p><pre><code class="language-reason">[@react.component]
let make = () =&gt; {
  let (value, setValue) = React.useState(() =&gt; "");
  
  &lt;input value onChange={event =&gt; setValue(_ =&gt; ReactEvent.Form.target(event)##value)} /&gt;;
};
</code></pre><p>Yes - we really did just go from 24 lines to 6 (I have refmt set to column width of 100, FWIW).</p><p>If you're already familiar with Hooks, this probably doesn't come as a shock to you. But in writing Hooks in Reason, there are a few things to note:</p><ul><li>In React, <code>useState</code> takes either an initial value or a function that returns an initial value. In order to ensure safety, Reason only accepts the function form.</li><li>Some hooks, such as the Effect hook, can take an array as a second argument. The ReasonReact Effect hook can take an array as well, except <code>useEffect0</code> all the way through <code>useEffect7</code> is provided, so that Reason knows exactly how many arguments to expect in the array. Type safety is a first class citizen in Reason.</li></ul><p>There are a few other gotchas, such as ensuring <code>useEffect</code> returns an <a href="https://reasonml.github.io/docs/en/null-undefined-option">option type</a>, but the best policy I've found when writing Hooks in Reason (and when writing anything else in Reason, too!) is to:</p><ol><li>Listen to the compiler</li><li><a href="https://github.com/reasonml/reason-react/blob/b29b7673b2a048c9612eaffbf7695972bb0c11c4/src/React.re#L114">Read the source code</a></li></ol><p>You can check out the rest of the React Hooks <a href="https://reactjs.org/docs/hooks-intro.html">here</a>. There are some really awesome ones, like <code>useMemo</code> which allows you to easily add memoization to your React app.</p><p>If you want to chat about Reason, Hooks, or anything else, <a href="https://twitter.com/donaldhruska">hit me up on Twitter</a>.</p>]]></content:encoded></item></channel></rss>